菜鸟入门第二天——如何写出好代码

前言

编写高质量的代码是每个开发者的目标,不仅有助于项目的可维护性和可扩展性,还能提高工作效率。

正文

给大家看两段代码,让大家从中选取你认为最好的那个

第一个 复制代码
let phoneNumber; 
function phoneNumber(numbers){return "(" + numbers[0] + numbers[1] + numbers[2]+ ")" + " " + numbers[3] + numbers[4] + numbers[5] + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""}
console.log(phoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));
第二个 复制代码
/**
 * @func 返回固定格式的电话号码 (123) 456-7890
 * @params arrays [1,2,3,4,5,6,7,8,9,0]
 * @return (123) 456-7890
 * @author hk
 */
 
// 函数定义
phoneNumber = (numbers) => "(" + numbers[0] + numbers[1] + numbers[2]
    + ")" + " " + numbers[3] + numbers[4] + numbers[5] 
    + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""
// 打印输出
console.log(phoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));

我相信大家看完这两个代码,应该和我的答案一样,都是选第二个吧!

虽然两份代码的运行结果是一样,但是两种代码风格是不一样的,对于想成为优秀程序员的你,必须要清楚的一项规则就是:

代码的可读性高于一切!

什么是可读性?字面意思:易于理解性,让其他开发者能够轻松理解和解释代码的能力。

一个好的代码需要:清晰的命名良好的注释一致的代码风格等要求

比如在第二个代码中就就用到了箭头函数

箭头函数是JavaScript中的一种函数表达式的简化形式,它引入了ECMAScript 6(ES6)标号。我们可以 通过使用箭头符号(=>)来定义函数,省略了function关键字和花括号({})。

我们可以通过使用箭头函数让代码更整洁,更美观。

案例

案例 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码</title>
    <style>
        .weui-btn {
            position: relative; /*使用relative考虑全面,方便后续 */
            display: block;
            width: 184px;
            margin-left: auto;
            margin-right: auto;
            padding: 12px 24px;
            box-sizing: border-box;
            font-size: 17px;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            color: #fff;
            border-radius: 8px;
            /* css reset*/
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* 禁用高亮的颜色*/
            user-select: none; /* 使用户无法选中,不能进行粘贴操作*/
        }
        .weui-btn_primary{
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- css 国际命名规范BEM weui-btn Block 状态 _primary -->
    <!-- button按钮太复杂 不跳转 -->
    <a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
</body>
</html>

此案例是基于CSS国际命名规范(BEM)下开发的一个WeUI的组件,其中有专门的以weui开头的类名,因为在大企业开发的大项目中通常是以项目代号-组件名来命名的。

我们需要学习、理解、使用BEM,这是决定我们能否进入大厂的第一步。

结论

好的代码是开发成功的关键,它提高了可维护性、可读性和可扩展性,同时减少了错误。遵循这些原则,不断精进你的编码技能,将有助于你编写出高质量的代码,为你的项目和团队的成功做出贡献。

相关推荐
Json_181790144809 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网32 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020434 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing36 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月39 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端