代码整洁之道的 7 个方法

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

原文做者：Joachim Zeelmaekers

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

可读的代码是可维护的

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

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

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

删除 没必要要的 代码注释

固然，有些代码能够很是复杂。我深知这一点且见过不少次。在复杂的代码中，我会写些适当的文档和代码注释。

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

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

function mergeArrays(...arrays) {
  let mergedArray = []

  arrays.forEach(array => {
      mergedArray = [...mergedArray, ...array]
  })

  return mergedArray
}

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

固然，咱们不要忘记注释的代码块。若是咱们忘记了，这里只有一个解决方案：删除代码。既然了不得的 git 能够检出旧代码，那么为何还要把它留在注释中呢？

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

重视命名

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

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

function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

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

function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}

固然，不须要调用新函数就能够很容易地建立美观的一行代码。但有时，一行代码的可读性并不高。

If 语句

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

但我常常看到这种状况。

问题

if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

解决方法

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

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

若是选项包含值，那么 ...

提早退出机制

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

让我给大家看一段代码。我相信大家之前见过这样的东西。

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}

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

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

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}

在这里用 “提早退出”，你能够检查是否 event 和 event.target 同时非假 。很明显，咱们确信这一事件 event.target 非假。由于若是这个语句为假，程序就不会执行其余代码。

解构赋值

在 JavaScript 中，咱们能够解构数据和对象。

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

一些代码示例

// Destructuring an object
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// Destructuring an array
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

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

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

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

这段代码能够正常运行。可是为何属性名仍是 name? 那将是整个范围中惟一的 name 属性吗？属性名又来自哪一个对象？

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

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

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

童子军规则

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

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

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

我确定答案是 NO。因此若是每一个人都当即清理房间的小部分，星期天的工做量会小一些。

代码库同理。若是每一个小的代码异味 code smell 都留在代码库中，没有人删除未使用的变量，linter 就会抓狂且有大约 77 个 warning。并且代码库将会有不少清洁工做要作，可是若是每一个人都承担起本身的责任并遵照童子军法则，不少问题将会获得解决。

代码风格

一样重要的还有肯定团队中的代码风格。

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

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

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

小结

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

若是你想了解更多关于代码整洁之道的知识，能够尝试阅读罗伯特・马丁的《代码整洁之道》。

最后，欢迎优秀的你加入 HelloGitHub 的「译文亦舞」系列，让你的才华舞动起来！把优秀的文章分享给更多的人。要求：

• 平时浏览 GitHub、开源、编程、程序员等英文资讯和文章
• 想把本身阅读到优秀的英文文章分享给更多的人
• 翻译准确但不是直翻或机翻
• 保证每个月至少翻译或校订 1 篇高质量文章
• 了解 Markdown 和排版规则
• 联系我（备注：翻译和从那个平台来的）

封面图来自 Unsplash 由 Kevin Ku 拍摄