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

前言

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

正文

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

第一个复制代码

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，这是决定我们能否进入大厂的第一步。

结论

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