JavaScript 代码整洁之道

参考资料

概述篇

• 书写能让人读懂的代码
• 使用英语编写代码
• 团队协作

制定通用的规则，依靠工具让团队的代码风格保持统一，要让代码看起来是由一个人编写的，消除个人的代码风格。常用工具Prettier。

变量篇

• 变量要名副其实
  不要使用x、y那种无意义变量。简单易懂的名字让我们很轻易的知道发生了什么。

• 变量名可以读出来
  请不要让我思考那些不是业务逻辑重点的事情！

• 不要在名称中使用变量的类型
  毫无意义！变量类型的前缀是噪音！

• 对同一类型的变量使用相同的词汇表
  同一个概念，三种不同的定义。必须自始至终使用统一的命名，不管是user、customer、client，只能用同一个。

• 不要添加不需要的上下文
  在变量名称中没有必要添加类或包的相关上下文。

const Car = {carMake: 'Honda',carModel: 'Accord',carColor: 'Blue',
};function paintCar(car) {car.carColor = 'Red';
}const Car = {make: 'Honda',model: 'Accord',color: 'Blue',
};function paint(car) {car.color = 'Red';
}

• 不要使用魔法数字和字符串
  在编写代码中，不应该在源代码中直接使用数字或文本字符串，这些通常也被称为魔法数字。
  魔法数字或字符串必须存储在常量中，通过对长的名称来表达出他的用途。

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);
user.rol = 'Administrator';const MILLISECONDS_IN_A_DAY = 86400000;
const ADMINISTRATOR_ROL = 'Administrator';setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
user.rol = ADMINISTRATOR_ROL;

函数篇

注释篇

• 只注释业务逻辑复杂的内容
  优秀的代码本身就是注释，通常都能所见即明白。因此，添加注释可以有，但通常不是必需的。
  程序中存在一个特定的业务逻辑，我们作为开发人员不知道该逻辑。需要对业务逻辑加上注释。

• 避免日志型注释
  以日期为维度的日志型注释是不必要的。这些日志工作应该交给版本控制工具，如 git，通过git log来获取历史记录。

• 避免使用注释去标记位置
  应该避免使用注释进行位置标记，因为这种做法通常只会让代码更冗余。

异常处理篇

• 使用异常而非返回码
  隔离业务逻辑和错误处理，他们是两个不同的问题，必须要去分开处理和对待。处理程序异常的责任交给变成语言去处理。例如try catch。

• 不要忽视异常处理
  ==请不要做鸵鸟。==对捕获的错误不做任何处理是没有意义的。

• 不要忽视Promise reject

• 定义异常层次结构

• 提供异常的上下文

复杂判断

• 不要使用标记flag作为函数参数
  必须创建两个函数来实现各自对应的逻辑功能，而不是使用一个函数来实现两个逻辑功能，因为他们是不同的功能。

• 封装判断条件

if (platform.state === 'fetching' && isEmpty(cart)) {// ...
}  

function showLoading(platform, cart) {return platform.state === 'fetching' && isEmpty(cart);
}if (showLoading(platform, cart)) {// ...
}

• 卫语句Guard Clauses替换嵌套的条件语句
  这个建议在程序员的开发中是至关重要的，在开发中不应该有嵌套的条件语句存在。
  卫语句是我们避免嵌套条件的主要技术之一，不需要else关键字就可以完美实现。

• 空对象Null Object模式
  在初级程序员的代码中可以看到的另一个常见错误，不断检查对象是否为 null，并根据该检查判断是否显示默认操作。这种模式称为空对象模式。

• 使用多态删除条件
  绝大多数程序员认为switch控制语句比if语句更简洁，虽然两种不同，但是使用了switch，其实也会提高代码的复杂性，最终会让我们思考太多。
  我们可以通过类的继承，为每个特定类型创建一个类，利用多态来避免使用条件判断。

• 使用策略模式/命令模式移除条件

函数篇

• 使用默认参数去代替短路操作或条件赋值

function setName(name) {const newName = name || 'Juan Palomo';
}

function setName(name  = 'Juan Palomo') {// ...
}

• 函数参数（理想情况下不多于2个）
  当一个函数有很多参数时，可以把这些参数组合在一起构成一个对象。

const burger = {name: 'Chicken',price: 1.25,ingredients: ['chicken'],vegan: false,
};
newBurger(burger);

• 避免副作用-全局变量
  避免副作用的最简单方法是将此函数作用范围内的变量都作为参数进行传递。

• 避免副作用-可变对象
  另一个非常重要的副作用就是直接修改对象本身，如果你一直从事计算机相关的工作，你会知道 JavaScript 自诞生以来就是支持对象可变的，目前许多库都在尽量避免使用可变对象。

• 函数应该只做一件事

• 函数应该只是有一个抽象级别

• 优先考虑函数式编程而不是命令式编程

• 函数链式调用

重构篇

重构：重构不是银弹，但它是一种有价值的武器，可以帮助你控制好代码和项目 (软件/应用)。

代码风格

参考文档

常量大写

const DAYS_IN_WEEK =7;
const DAYS_IN_MONTH=30;

先声明后调用

为了方便阅读，把函数声明写在函数调用前面。

注释

只有业务逻辑需要注释。代码注释不是越多越好。