编程之道 | 整洁代码

参考资料

代码整洁之道的 7 个方法

这里我不会当所有的例子，我 copy 一下，我觉得有用的技巧。

代码例子

重视命名

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

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

1
2
3

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 语句

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

但我经常看到这种情况。

问题

1
2
3

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 非假。因为如果这个语句为假，程序就不会执行其他代码。

童子军规则

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

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

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

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

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