编写整洁代码的艺术-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45731450/article/details/109904483

写出整洁的代码，是每个程序员的追求。

最近，我使用了我们公司内部研发的H5编辑平台去开发日常的需求，平台是用React去开发的，相应的用到的一些组件也是用React去实现的，对于我来说，我对React的熟悉度并不高，所以在开发的时候会去熟悉之前组件的代码，但是从熟悉代码中我发现了有的小伙伴的代码并没有标注释，就让我很头疼。。。。往往不清楚这个命名是什么意思这个方法是用来干嘛的，所以，我想记录一下怎样写出整洁规范的代码，用于共勉进步。
对于什么是整洁的代码，书中给出了大师们的总结：

Bjarne Stroustrup：优雅且高效；直截了当；减少依赖；只做好一件事
Grady booch：简单直接
Dave thomas：可读，可维护，单元测试
Ron Jeffries：不要重复、单一职责，表达力（Expressiveness）

其中，我最喜欢的是表达力（Expressiveness）这个描述，这个词似乎道出了好代码的真谛：用简单直接的方式描绘出代码的功能，不多也不少。

可读性代码就是可维护性代码！

一、注重命名

为一个事件命名是很困难的。虽然困难但是非常有必要。

想象以下，将两个数组合并成一个数组，并生成一个唯一值的数组。那么你会怎么命名它呢？我们也许会这样命名？

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

上面的命名并不糟糕，但是还不是很友好。你可以将一个功能函数拆分为两个功能函数，这样命名更友好和函数复用性更好。

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

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

好的变量名告诉你：是什么东西，为什么存在，该怎么使用，如果需要通过注释来解释变量，那么就先得不那么名副其实了。

命名有这几点需要注意的：

使用读的出来的单词（如果名称读不出来，那么讨论的时候就会像个傻鸟）
使用方便搜索的命名（名字长短应与其作用域大小相对应）
避免思维映射（比如在代码中写一个 temp，那么读者就得每次看到这个单词的时候翻译成其真正的意义）

二、IF语句简化

假设我们有下面的代码：

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

我们可以这样解决：

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

将乱七八糟的条件判断放到一个变量中存储，比看臃肿的表达式要好很多。

三、及早返回

有下面的代码：

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

及早返回使得我们的代码更加易读：

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

四、解构赋值

在javascript中，我们可以对objects和arrays进行解构赋值。

// object 解构赋值
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// array 解构赋值
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2