谁不想写出干净的代码？7 个技巧，让你的同事爱上你的代码

分手后的思念是犯贱 2022-12-18 15:51 100阅读 0赞

你的同事：“这个代码的作者是谁？”

期望：“是我！” 你会自豪地回答，因为该代码像公主一样美丽。

现实：“不，不是我！” 你说谎是因为该代码像野兽一样丑陋。

现在，如果你想让期望成为现实，请继续阅读。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]  
1 使用有意义的变量命名

使用有意义的名称，这会让你一眼就知道是什么意思。

// 不推荐
    let xyz = validate(‘amyjandrews’);
    // 推荐
    let isUsernameValid = validate(‘amyjandrews’);

将集合类型命名为复数是有意义的。因此，不要忘记 s：

// 不推荐
    let number = [3, 5, 2, 1, 6];
    // 推荐
    let numbers = [3, 5, 2, 1, 6];

描述函数做的事。所以，一个函数的命名应该是个动词。

// 不推荐 function usernameValidation(username) { }
    // 推荐 function validateUsername(username) { }

对于 boolean 类型的命名需要以 is 作为开始。

let isValidName = validateName(‘amyjandrews’);

不要直接使用常量，因为随着时间的推移，你可能会这样：“这 TM 是什么？”。最好的是在使用之前命名好需要的常量。

// 不推荐
    let area = 5 * 5 * 3.14;
    // 推荐
    const PI = 3.14;
    let radius = 5;
    let area = PI * radius * radius;

对于回调函数，不要偷懒，只是命名变量为一个字母，例如 h、j、d（可能即便是你，这些命名的主人，都不知道它们是什么意思）。长话短说，如果变量是个人 person，传个 person；如果是本书 book，传个 book：

// 不推荐
    let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’]; books.forEach(function(b) { 
      // …
    });
    // 推荐
    let books = [‘Learn JavaScript’, ‘Coding for Beginners’, ‘CSS the Good Parts’]; books.filter(function(book) { 
      // …
    });

2 抛出信息丰富的异常

“An error occurs.”  
或者只是：Error.  
每当我在某些 app 或网站中看到这样的错误，如果我作为用户，我会讨厌它。我做的什么是错误的？是我导致的这个错误？那么错误是什么？你并没有告诉我，接下来我应该怎么做？  
你的用户可能会和我有同样的感受，有时他们将会卸载你的 app，并不会再安装。  
其实，写一个清楚的错误消息不是很难的事。  
如果此时没有连接网络，则：

showMessage(‘No internet connection! Please check your connection and try again!’);

如果用户忘记输入信息，则：

showMessage(‘Please enter your username’);

更重要的是，一个清楚的错误可以帮助你快速定位 bug，并且节省你很多开发的时间。

if (error) { 
      throw new Error(‘validation.js:checkUser: special characters are now allowed’);
    }

以上这些就是你可以参考的错误消息格式。

3 尽可能早地 return

请看下面这段代码：

function login(username, password) { 
      if (isValid(username)) { 
        // Log in
      } else { 
        showMessage(‘Username is not valid’);
      }
    }

其实，这里 else 的部分是不需要的。我们应该通过尽早返回一个信息来移除它：

function login(username, password) { 
      if (!isValid(username)) { 
        showMessage(‘Username is not valid’);
        return;
      }
      // Log in
    }

这会让你的代码变得更加清晰。边缘条件应该放在较早的位置，然后再放置较长的部分，它要处理更多的逻辑。

4 不要一个函数太多的权利

每个函数应该只承担一项责任。不要出现一个强大的函数做太多事情况。

function validateAndLogin() { 
      // Do a lot of things here
    }

and 这个单词不应该是函数名的一部分。And 会导致添加更多的责任到函数中，这从长远看来弊大于利。

下面这种写法是最好的：

function validate() { 
      // Only validate
    }
    function login() { 
      // Only login
    }

5 避免副作用

在函数外的任何东西都不是它的业务。所以，函数不应该接触到它们中的任何一个。

例如：

var number = 3; function changeNumber(add) { 
      number = 2 + add;
      return number;
    }
    changeNumber();

当你调用一个改变 number 的函数，number 变量的值将会被改为 6。这是个真实存在的问题，因为有时你对改变了全局变量一无感知。所以，你应该在你的项目避免产生副作用。

那要怎么做？通过使用纯函数。

上面这个例子可以改成这样：

function addThree(summand) { 
      const CONSTANT = 3;
      let sum = summand + CONSTANT;
      return sum;
    }

6 创建模块

当你创建一些函数。它们似乎在做类似的动作。例如，验证用户名和验证密码。那么，你会感觉到它们可以分到一个模块中。这里我们称之为验证模块。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993  
> 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
> 每天更新最新技术文章干货。

7.使用代码格式化插件

我大多数的项目都是用 VSCode 开发的，如果你也在使用 VSCode，请确认安装了 Prettier 来保持漂亮的代码。  
这个插件将会节省你花在格式化代码上的时间。得益于它，你可以利用这部分时间将更多的精力放在代码质量上。

❤️ 爱心三连击  
通过阅读，如果你觉得有收获的话，可以爱心三连击！！！

> 作者：五柳 链接：https://juejin.im/post/6887184781008715789 来源：掘金

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/91cd89e870cc41a7bca7323512f88c1a.png