代码整洁之道的 7 个方法

可读的代码是可维护的

在这篇短文中，我将介绍一些你可以用来改进你的代码的方法。本文代码示例均使用 JavaScript。

成都创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为新余企业提供专业的成都网站制作、做网站、外贸营销网站建设，新余网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

我发现但凡是可读的代码必定是可维护的。

作为一名开发人员，我的目标是编写高质量的代码。团队中的每个开发人员，不管他/她的技术水平如何，都必须能够通过阅读理解我所写的代码。代码的可读性有助于年轻的开发人员编写代码时更加自信。

删除 不必要的 代码注释

当然，有些代码可以非常复杂。我深知这一点且见过很多次。在复杂的代码中，我会写些适当的文档和代码注释。

别误会。我不是代码注释或 JavaScript JSdoc 的爱好者，而且基本上我能不用它们便不用。

我不需要任何注释来解释这个接收 X 个数组并将它们合并到一个新的数组中的函数。

 
 
 
      
  
  
  1. function mergeArrays(...arrays) { 
    2.   
  
  
  2.   let mergedArray = [] 
    3.   
  
  
  3.  
    4.   
  
  
  4.   arrays.forEach(array => { 
    5.   
  
  
  5.       mergedArray = [...mergedArray, ...array] 
    6.   
  
  
  6.   }) 
    7.   
  
  
  7.  
    8.   
  
  
  8.   return mergedArray 
    9.   
  
  
  9. } 
    10.

像示例代码，如果增添文档并不能提高可读性。我希望团队成员知道展开操作符是什么。如果他们不清楚，他们应该在代码审查 code review 时来问我。

当然，我们不要忘记注释的代码块。如果我们忘记了，这里只有一个解决方案： 删除代码 。既然了不起的 git 可以检出旧代码，那么为什么还要把它留在注释中呢？

请停止把你的代码库变成垃圾场。

重视命名

如果你看到函数名 mergeArrays，就应该很清楚地知道这是一个将 X 个数组组合成一个新的数组的函数。

我知道命名是件难事。函数越复杂，命名就越难… 我有个法子让命名更容易，举个例子：有一个函数，它会合并两个数组并生成一个新的唯一的数字列表。你会怎么命名？是下面这样吗？

 
 
 
      
  
  
  1. function mergeNumberListIntoUniqueList(listOne, listTwo) { 
    2.   
  
  
  2.   return [...new Set([...listOne, ...listTwo])] 
    3.   
  
  
  3. } 
    4.

mergeNumberListIntoUniqueList 这个名字并没有那么糟糕，至少功能如其名。命名的难点在于这个函数要做两件事：一个函数做的事情越多，命名它就越困难。将这个函数拆分为两个单独的函数，命名会更容易且函数复用更容易。

 
 
 
      
  
  
  1. function mergeLists(listOne, listTwo) { 
    2.   
  
  
  2.   return [...listOne, ...listTwo] 
    3.   
  
  
  3. } 
    4.   
  
  
  4.  
    5.   
  
  
  5. function createUniqueList(list) { 
    6.   
  
  
  6.   return [...new Set(list)] 
    7.   
  
  
  7. } 
    8.

当然，不需要调用新函数就可以很容易地创建美观的一行代码。但有时，一行代码的可读性并不高。

If 语句

我对这个问题的命名无力… 看！命名不易…

但我经常看到这种情况。

问题

 
 
 
      
  
  
  1. if(value === 'duck' || value === 'dog' || value === 'cat') { 
    2.   
  
  
  2.   // ... 
    3.   
  
  
  3. } 
    4.

解决方法

 
 
 
      
  
  
  1. const options = ['duck', 'dog', 'cat']; 
    2.   
  
  
  2. if (options.includes(value)) { 
    3.   
  
  
  3.   // ... 
    4.   
  
  
  4. } 
    5.

这样做，你创建了一段像是英语句子般的可读代码。

如果选项包含值，那么 ...

提前退出机制

这个准则有很多种命名方式，但我选择了 “提前退出 Early exit” 这个名字。

让我给你们看一段代码。我相信你们以前见过这样的东西。

 
 
 
      
  
  
  1. function handleEvent(event) { 
    2.   
  
  
  2.   if (event) { 
    3.   
  
  
  3.     const target = event.target; 
    4.   
  
  
  4.     if (target) { 
    5.   
  
  
  5.       // Your awesome piece of code that uses target 
    6.   
  
  
  6.     } 
    7.   
  
  
  7.   } 
    8.   
  
  
  8. } 
    9.

来我们检查下对象 event 是否为真，以及属性 target 是否可用。问题是上面代码我们已经用了两个 if 语句。

让我们看看如何在这里实现 “提前退出”。

 
 
 
      
  
  
  1. function handleEvent(event) { 
    2.   
  
  
  2.   if (!event || !event.target) { 
    3.   
  
  
  3.     return; 
    4.   
  
  
  4.   } 
    5.   
  
  
  5.   // Your awesome piece of code that uses target 
    6.   
  
  
  6. } 
    7.

在这里用 “提前退出”，你可以检查是否 event 和   event.target 同时非假 。很明显，我们确信这一事件 event.target 非假。因为如果这个语句为假，程序就不会执行其他代码。

解构赋值

在 JavaScript 中，我们可以解构数据和对象。

根据 developer.mozilla.org 上的文档， 解构赋值语法是一种 JavaScript 表达式。通过解构赋值，可以将值从数组、属性从对象中取出，赋值给其他变量 。

一些代码示例

 
 
 
      
  
  
  1. // Destructuring an object 
    2.   
  
  
  2. const numbers = {one: 1, two: 2}; 
    3.   
  
  
  3. const {one, two} = numbers; 
    4.   
  
  
  4. console.log(one); // 1 
    5.   
  
  
  5. console.log(two); // 2 
    6.   
  
  
  6.  
    7.   
  
  
  7. // Destructuring an array 
    8.   
  
  
  8. const numbers = [1, 2, 3, 4, 5]; 
    9.   
  
  
  9. const [one, two] = numbers; 
    10.   
  
  
  10. console.log(one); // 1 
    11.   
  
  
  11. console.log(two); // 2 
    12.

解构的问题在于，它有时会为属性创建一个不好的命名。最好的例子是从 API 获取数据并接收具有 data 属性的响应对象。

 
 
 
      
  
  
  1. const url = "http://localhost:8080/api/v1/organizers/1" 
    2.   
  
  
  2. const response = await axios.get(url) 
    3.   
  
  
  3. const {name} = response.data 
    4.

这个代码示例说明你正在获取 id 为 1 的 organizer。organizer 对象有一个名字，你可以解构它。这样做没什么问题。

这段代码可以正常运行。但是为什么属性名还是 name ? 那将是整个范围中唯一的 name 属性吗？属性名又来自哪个对象？

通过重命名属性可避免这些问题。

 
 
 
      
  
  
  1. const url = "http://localhost:8080/api/v1/organizers/1" 
    2.   
  
  
  2. const response = await axios.get(url) 
    3.   
  
  
  3. const {name: organizerName} = response.data 
    4.

这段代码变得更具可读性。每个人都知道变量是 organizer 的名字。

童子军规则

听过这样一句话吗：“永远保持离开时的露营地比你发现它时更整洁”？

这就是童子军的规则。让代码比发现时更好。你发现代码异味 code smell？重构它！你发现一个未使用的变量？删除它！

我喜欢把童子军规则和打扫房间的情况进行类比。想象一下，你家里的每个人都把盘子放在水槽上，把所有垃圾都放在走廊上，把所有要洗的衣服都放在浴室里。但是每个星期天，你必须花费 4 个多小时清理整个房子。你会钟意吗？

我肯定答案是 NO。所以如果每个人都立即清理房间的小部分，星期天的工作量会小一些。

代码库同理。如果每个小的代码异味 code smell 都留在代码库中，没有人删除未使用的变量，linter 就会抓狂且有大约 77 个 warning。而且代码库将会有很多清洁工作要做，但是如果每个人都承担起自己的责任并遵守童子军法则，很多问题将会得到解决。

代码风格

同样重要的还有确定团队中的代码风格。

我不 care 你是喜欢单引号还是双引号，空格还是 tab，结尾逗号还是不用。选择一种风格并坚持下去。你可以用 Linter 或者 Prettier 来做这件事。

有很多工具可以用来解决代码风格问题。我最钟意的是使用 Husky 预提交钩子。Prettier 的文档中也有一个关于预提交钩子的页面。

这个预提交钩子总是在每次提交之前运行配置好的命令。如果你正确地配置它，它会运行得更漂亮，并对所有文件应用所有规则。这确保了团队总是拥有统一的代码风格，而没有任何糟糕的代码。

小结

我知道有些方法显而易见，有些则不是。但作为一名全职开发人员，我在不同的代码库上工作。这些规则的重要性只有在较大的代码库中才会突显。但这并不意味着你不应该将这些方法用在小项目中，提高你的代码质量让小项目更高效。它让团队成员方便地阅读你的代码并合并你的 pull 请求。正如我所说的，可读的代码更容易维护，当然可读的代码还有其他更多的好处。

如果你想了解更多关于代码整洁之道的知识，可以尝试阅读罗伯特・马丁的《代码整洁之道》。

原文地址：Clean up your code by applying these 7 rules :zap:️

原文作者：Joachim Zeelmaekers（已授权）

译者 & 校正：HelloGitHub-小鱼干 & HelloGitHub-鸭鸭

分享文章：代码整洁之道的 7 个方法
链接分享：http://www.gawzjz.com/qtweb2/news28/20128.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制网站知识

同城分类信息

彭州网站建设　　 　成都logo设计公司　　 　软文推广　　 　成都路面机械设备　　 　梦港之夜　　 　盐亭网站制作公司　　 　成都网站制作　　 　成都网络推广　　 　橡塑板　　 　重庆APP开发　　 　温江做网站　　 　成都网站制作　　 　成都广告招牌　　 　彭州做网站　　 　眉山电信机房　　 　温江电信机房　　 　成都木托盘　　 　雅安电信机房　　 　达州网站制作　　 　泸州做网站