有没有似曾相识
如果你对于代码，除了关注是否能准确的执行业务逻辑，还关心代码本身是怎么写的，是否易读，那么你应该会关注如何写出干净优雅的代码。作为专业的工程师，除了保证自己的代码没有bug，能正确的完成业务逻辑，还应该保证几个月后的自己，或者其他工程师，也能够维护自己的代码。你写的每一段代码，通常情况下，都不会是 一次性 工作，通常伴随着后续的不断迭代。如果代码不够优雅，那么将来维护这段代码的人(甚至你自己)，都将感到非常痛苦。祈祷吧，将来面对这些糟糕代码的人，不是你自己，而是别人。
OK，我们先来简单定义下，什么是 干净优雅 的代码：干净优雅的代码，应该是自解释的，容易看懂的，并且很容易修改或者扩展一些功能 。
现在，静下来回忆一下，有多少次，当你接手前辈留下来的糟糕代码而懵逼时，心里默默的说过 "我*"的：
"我*，那是啥玩意儿"
"我*，这段代码是干啥的”
"我*，这个变量又是干啥的"
嗯，下面这个图片完美的展示了这种情形：
引用 Robert C. Martin 的名言来说明这种情况：
丑陋的代码也能实现功能。但是不够优雅的代码，往往会让整个开发团队都跪在地上哭泣。
在这篇文章里，我主要讲下载 JavaScript里怎么书写干净优雅的代码，但是对于其他编程语言，道理也是类似的。
JavaScript优雅代码的最佳实践
1. 强类型校验
使用 === 而不是 == 。
// If not handled properly, it can dramatically affect the program logic. It's like, you expect to go left, but for some reason, you go right. 0 == false // true 0 === false // false 2 == "2" // true 2 === "2" // false // example const value = "500"; if (value === 500) { console.log(value); // it will not be reached } if (value === "500") { console.log(value); // it will be reached }
2. 变量命名
变量、字段命名，应该包含它所对应的真实含义。这样更容易在代码里搜索，并且其他人看到这些变量，也更容易理解。
错误的示范
let daysSLV = 10; let y = new Date().getFullYear(); let ok; if (user.age > 30) { ok = true; }
正确的示范
const MAX_AGE = 30; let daysSinceLastVisit = 10; let currentYear = new Date().getFullYear(); ... const isUserOlderThanAllowed = user.age > MAX_AGE;
不要在变量名中加入不必要的单词。
错误的示范
let nameValue; let theProduct;
正确的示范
let name; let product;
不要强迫开发者去记住变量名的上下文。
错误的示范
const users = ["John", "Marco", "Peter"]; users.forEach(u => { doSomething(); doSomethingElse(); // ... // ... // ... // ... // Here we have the WTF situation: WTF is `u` for? register(u); });
正确的示范
const users = ["John", "Marco", "Peter"]; users.forEach(user => { doSomething(); doSomethingElse(); // ... // ... // ... // ... register(user); });
不要在变量名中添加多余的上下文信息。
错误的示范
const user = { userName: "John", userSurname: "Doe", userAge: "28" }; ... user.userName;
正确的示范
const user = { name: "John", surname: "Doe", age: "28" }; ... user.name;
3. 函数相关
尽量使用足够长的能够描述函数功能的命名。通常函数都会执行一个明确的动作或意图，那么函数名就应该是能够描述这个意图一个动词或者表达语句，包含函数的参数命名也应该能清晰的表达具体参数的含义。
错误的示范
function notif(user) { // implementation }
正确的示范
function notifyUser(emailAddress) { // implementation }
避免函数有太多的形参。比较理想的情况下，一个函数的参数应该 <=2个 。函数的参数越少，越容易测试。
错误的示范
function getUsers(fields, fromDate, toDate) { // implementation }
正确的示范
function getUsers({ fields, fromDate, toDate }) { // implementation } getUsers({ fields: ['name', 'surname', 'email'], fromDate: '2019-01-01', toDate: '2019-01-18' });
如果函数的某个参数有默认值，那么应该使用新的参数默认值语法，而不是在函数里使用 || 来判断。
错误的示范
function createShape(type) { const shapeType = type || "cube"; // ... }
正确的示范
function createShape(type = "cube") { // ... }
一个函数应该做一件事情。避免在一个函数里，实现多个动作。
错误的示范
function notifyUsers(users) {
users.forEach(user => {
const userRecord = database.lookup(user);
if (userRecord.isVerified()) {
notify(user);
}
});
}
正确的示范