测试代码质量的唯一方式：别人看你代码时说 “卧槽”的次数

朱雀 2022-10-11 00:56 85阅读 0赞

##  ##

代码质量与其整洁度成正比。干净的代码，既在质量上较为可靠，也为后期维护、升级奠定了良好基础。

本文并不是代码风格指南，而是关于代码的可读性、复用性、扩展性探讨。

我们将从几个方面展开讨论：

1.  变量
2.  函数
3.  对象和数据结构
4.  类
5.  SOLID
6.  测试
7.  异步
8.  错误处理
9.  代码风格
10. 注释

[前端进阶暗号：csdn][csdn]

## 变量 ##

### 用有意义且常用的单词命名变量 ###

**Bad:**

`const yyyymmdstr = moment().format('YYYY/MM/DD');`

**Good:**

`const currentDate = moment().format('YYYY/MM/DD');`

### 保持统一 ###

可能同一个项目对于获取用户信息，会有三个不一样的命名。应该保持统一，如果你不知道该如何取名，可以去 codelf 搜索，看别人是怎么取名的。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>getUserInfo();</code> <code>getClientData();</code> <code>getCustomerRecord();</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

`getUser()`

### 每个常量都该命名 ###

可以用 buddy.js 或者 ESLint 检测代码中未命名的常量。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 三个月之后你还能知道 86400000 是什么吗?</code> <code>setTimeout(blastOff, 86400000);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const MILLISECOND_IN_A_DAY = 86400000;</code> <code>setTimeout(blastOff, MILLISECOND_IN_A_DAY);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 可描述 ###

通过一个变量生成了一个新变量，也需要为这个新变量命名，也就是说每个变量当你看到他第一眼你就知道他是干什么的。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const ADDRESS = </code><code>'One Infinite Loop, Cupertino 95014'</code><code>;</code> <code>const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;</code> <code>saveCityZipCode(ADDRESS.match(CITY_ZIP_CODE_REGEX)[1],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ADDRESS.match(CITY_ZIP_CODE_REGEX)[2]);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const ADDRESS = </code><code>'One Infinite Loop, Cupertino 95014'</code><code>;</code> <code>const CITY_ZIP_CODE_REGEX = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;</code> <code>const [, city, zipCode] = ADDRESS.match(CITY_ZIP_CODE_REGEX) || [];</code> <code>saveCityZipCode(city, zipCode);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 直接了当 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const l = [</code><code>'Austin'</code><code>, </code><code>'New York'</code><code>, </code><code>'San Francisco'</code><code>];</code> <code>locations.forEach((l) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>doStuff();</code> <code>&nbsp;&nbsp;</code><code>doSomeOtherStuff();</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// 需要看其他代码才能确定 'l' 是干什么的。</code> <code>&nbsp;&nbsp;</code><code>dispatch(l);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const locations = [</code><code>'Austin'</code><code>, </code><code>'New York'</code><code>, </code><code>'San Francisco'</code><code>];</code> <code>locations.forEach((location) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>doStuff();</code> <code>&nbsp;&nbsp;</code><code>doSomeOtherStuff();</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>dispatch(location);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免无意义的前缀 ###

如果创建了一个对象 car，就没有必要把它的颜色命名为 carColor。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const car = { </code> <code>&nbsp;&nbsp;</code><code>carMake: </code><code>'Honda'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>carModel: </code><code>'Accord'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>carColor: </code><code>'Blue'</code> <code>};</code> <code>function</code> <code>paintCar(car) { </code> <code>&nbsp;&nbsp;</code><code>car.carColor = </code><code>'Red'</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const car = { </code> <code>&nbsp;&nbsp;</code><code>make: </code><code>'Honda'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>model: </code><code>'Accord'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>color: </code><code>'Blue'</code> <code>};</code> <code>function</code> <code>paintCar(car) { </code> <code>&nbsp;&nbsp;</code><code>car.color = </code><code>'Red'</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 使用默认值 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createMicrobrewery(name) { </code> <code>&nbsp;&nbsp;</code><code>const breweryName = name || </code><code>'Hipster Brew Co.'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createMicrobrewery(name = </code><code>'Hipster Brew Co.'</code><code>) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

## 函数 ##

### 参数越少越好 ###

如果参数超过两个，使用 ES2015/ES6 的解构语法，不用考虑参数的顺序。（注：不要超过3个参数，如果确实需要3个以上的参数，用对象包起来）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createMenu(title, body, buttonText, cancellable) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createMenu({ title, body, buttonText, cancellable }) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>createMenu({ </code> <code>&nbsp;&nbsp;</code><code>title: </code><code>'Foo'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>body: </code><code>'Bar'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>buttonText: </code><code>'Baz'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>cancellable: </code><code>true</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

### 只做一件事情 ###

这是一条在软件工程领域流传久远的规则。严格遵守这条规则会让你的代码可读性更好，也更容易重构。如果违反这个规则，那么代码会很难被测试或者重用。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>emailClients(clients) { </code> <code>&nbsp;&nbsp;</code><code>clients.forEach((client) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const clientRecord = database.lookup(client);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(clientRecord.isActive()) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>email(client);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>emailActiveClients(clients) { </code> <code>&nbsp;&nbsp;</code><code>clients</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.filter(isActiveClient)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.forEach(email);</code> <code>}</code> <code>function</code> <code>isActiveClient(client) { </code> <code>&nbsp;&nbsp;</code><code>const clientRecord = database.lookup(client);&nbsp;&nbsp;&nbsp; </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>clientRecord.isActive();</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 顾名思义 ###

看函数名就应该知道它是干啥的。(注：其实就是语义化命名，代码是给人看的)

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>addToDate(date, month) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>const date = </code><code>new</code> <code>Date();</code> <code>// 很难知道是把什么加到日期中</code> <code>addToDate(date, 1);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>addMonthToDate(month, date) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>const date = </code><code>new</code> <code>Date();</code> <code>addMonthToDate(1, date);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 只需要一层抽象层 ###

如果函数嵌套过多会导致很难复用以及测试。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>parseBetterJSAlternative(code) { </code> <code>&nbsp;&nbsp;</code><code>const REGEXES = [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>];</code> <code>&nbsp;&nbsp;</code><code>const statements = code.split(</code><code>' '</code><code>);</code> <code>&nbsp;&nbsp;</code><code>const tokens = [];</code> <code>&nbsp;&nbsp;</code><code>REGEXES.forEach((REGEX) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>statements.forEach((statement) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>const ast = [];</code> <code>&nbsp;&nbsp;</code><code>tokens.forEach((token) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// lex...</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>ast.forEach((node) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// parse...</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>parseBetterJSAlternative(code) { </code> <code>&nbsp;&nbsp;</code><code>const tokens = tokenize(code);</code> <code>&nbsp;&nbsp;</code><code>const ast = lexer(tokens);</code> <code>&nbsp;&nbsp;</code><code>ast.forEach((node) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// parse...</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> <code>function</code> <code>tokenize(code) { </code> <code>&nbsp;&nbsp;</code><code>const REGEXES = [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>];</code> <code>&nbsp;&nbsp;</code><code>const statements = code.split(</code><code>' '</code><code>);</code> <code>&nbsp;&nbsp;</code><code>const tokens = [];</code> <code>&nbsp;&nbsp;</code><code>REGEXES.forEach((REGEX) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>statements.forEach((statement) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>tokens.push( </code><code>/* ... */</code> <code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>tokens;</code> <code>}</code> <code>function</code> <code>lexer(tokens) { </code> <code>&nbsp;&nbsp;</code><code>const ast = [];</code> <code>&nbsp;&nbsp;</code><code>tokens.forEach((token) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ast.push( </code><code>/* ... */</code> <code>);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>ast;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 删除重复代码 ###

很多时候虽然是同一个功能，但由于一两个不同点，让你不得不写两个几乎相同的函数。

要想优化重复代码需要有较强的抽象能力，错误的抽象还不如重复代码。所以在抽象过程中必须要遵循 SOLID 原则（SOLID 是什么？稍后会详细介绍）。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>showDeveloperList(developers) { </code> <code>&nbsp;&nbsp;</code><code>developers.forEach((developer) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const expectedSalary = developer.calculateExpectedSalary();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const experience = developer.getExperience();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const githubLink = developer.getGithubLink();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const data = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>expectedSalary,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>experience,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>githubLink</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>render(data);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> <code>function</code> <code>showManagerList(managers) { </code> <code>&nbsp;&nbsp;</code><code>managers.forEach((manager) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const expectedSalary = manager.calculateExpectedSalary();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const experience = manager.getExperience();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const portfolio = manager.getMBAProjects();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const data = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>expectedSalary,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>experience,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>portfolio</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>render(data);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>showEmployeeList(employees) { </code> <code>&nbsp;&nbsp;</code><code>employees.forEach(employee =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const expectedSalary = employee.calculateExpectedSalary();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const experience = employee.getExperience();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const data = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>expectedSalary,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>experience,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code><code>(employee.type) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code> <code>'develop'</code><code>:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.githubLink = employee.getGithubLink();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code> <code>'manager'</code><code>:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data.portfolio = employee.getMBAProjects();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>break</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>render(data);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 对象设置默认属性 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const menuConfig = { </code> <code>&nbsp;&nbsp;</code><code>title: </code><code>null</code><code>,</code> <code>&nbsp;&nbsp;</code><code>body: </code><code>'Bar'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>buttonText: </code><code>null</code><code>,</code> <code>&nbsp;&nbsp;</code><code>cancellable: </code><code>true</code> <code>};</code> <code>function</code> <code>createMenu(config) { </code> <code>&nbsp;&nbsp;</code><code>config.title = config.title || </code><code>'Foo'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>config.body = config.body || </code><code>'Bar'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>config.buttonText = config.buttonText || </code><code>'Baz'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>config.cancellable = config.cancellable !== undefined ? config.cancellable : </code><code>true</code><code>;</code> <code>}</code> <code>createMenu(menuConfig);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const menuConfig = { </code> <code>&nbsp;&nbsp;</code><code>title: </code><code>'Order'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>// 'body' key 缺失</code> <code>&nbsp;&nbsp;</code><code>buttonText: </code><code>'Send'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>cancellable: </code><code>true</code> <code>};</code> <code>function</code> <code>createMenu(config) { </code> <code>&nbsp;&nbsp;</code><code>config = Object.assign({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>title: </code><code>'Foo'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body: </code><code>'Bar'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>buttonText: </code><code>'Baz'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cancellable: </code><code>true</code> <code>&nbsp;&nbsp;</code><code>}, config);</code> <code>&nbsp;&nbsp;</code><code>// config 就变成了: {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>createMenu(menuConfig);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 不要传 flag 参数 ###

通过 flag 的 true 或 false，来判断执行逻辑，违反了一个函数干一件事的原则。(这个持保留意见，只能说尽量不要把分支判断放在函数里面)

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createFile(name, temp) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(temp) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fs.create(`./temp/${name}`);</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fs.create(name);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>createFile(name) { </code> <code>&nbsp;&nbsp;</code><code>fs.create(name);</code> <code>}</code> <code>function</code> <code>createFileTemplate(name) { </code> <code>&nbsp;&nbsp;</code><code>createFile(`./temp/${name}`)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免副作用（第一部分） ###

函数接收一个值返回一个新值，除此之外的行为我们都称之为副作用，比如修改全局变量、对文件进行 IO 操作等。

当函数确实需要副作用时，比如对文件进行 IO 操作时，请不要用多个函数/类进行文件操作，有且仅用一个函数/类来处理。也就是说副作用需要在唯一的地方处理。

副作用的三大天坑：随意修改可变数据类型、随意分享没有数据结构的状态、没有在统一地方处理副作用。

（注：这就是纯函数的作用，同样的输入，返回的一定是同样的输入，这样对于结果是可预料的，不会出现意料之外甚至很难修复的问题）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 全局变量被一个函数引用</code> <code>// 现在这个变量从字符串变成了数组，如果有其他的函数引用，会发生无法预见的错误。</code> <code>var</code> <code>name = </code><code>'Ryan McDermott'</code><code>;</code> <code>function</code> <code>splitIntoFirstAndLastName() { </code> <code>&nbsp;&nbsp;</code><code>name = name.split(</code><code>' '</code><code>);</code> <code>}</code> <code>splitIntoFirstAndLastName();</code> <code>console.log(name); </code><code>// ['Ryan', 'McDermott'];</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>var</code> <code>name = </code><code>'Ryan McDermott'</code><code>;</code> <code>var</code> <code>newName = splitIntoFirstAndLastName(name)</code> <code>function</code> <code>splitIntoFirstAndLastName(name) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>name.split(</code><code>' '</code><code>);</code> <code>}</code> <code>console.log(name); </code><code>// 'Ryan McDermott';</code> <code>console.log(newName); </code><code>// ['Ryan', 'McDermott'];</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免副作用（第二部分） ###

在 JavaScript 中，基本类型通过赋值传递，对象和数组通过引用传递。以引用传递为例：

假如我们写一个购物车，通过 addItemToCart() 方法添加商品到购物车，修改 购物车数组。此时调用 purchase() 方法购买，由于引用传递，获取的 购物车数组 正好是最新的数据。

看起来没问题对不对？

如果当用户点击购买时，网络出现故障， purchase() 方法一直在重复调用，与此同时用户又添加了新的商品，这时网络又恢复了。那么 purchase() 方法获取到 购物车数组 就是错误的。

为了避免这种问题，我们需要在每次新增商品时，克隆 购物车数组 并返回新的数组。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const addItemToCart = (cart, item) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>cart.push({ item, date: Date.now() });</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const addItemToCart = (cart, item) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>[...cart, {item, date: Date.now()}]</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

### 不要写全局方法 ###

在 JavaScript 中，永远不要污染全局，会在生产环境中产生难以预料的 bug。举个例子，比如你在 Array.prototype 上新增一个 diff 方法来判断两个数组的不同。而你同事也打算做类似的事情，不过他的 diff 方法是用来判断两个数组首位元素的不同。很明显你们方法会产生冲突，遇到这类问题我们可以用 ES2015/ES6 的语法来对 Array 进行扩展。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>Array.prototype.diff = </code><code>function</code> <code>diff(comparisonArray) { </code> <code>&nbsp;&nbsp;</code><code>const hash = </code><code>new</code> <code>Set(comparisonArray);</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.filter(elem =&gt; !hash.has(elem));</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class SuperArray extends Array { </code> <code>&nbsp;&nbsp;</code><code>diff(comparisonArray) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const hash = </code><code>new</code> <code>Set(comparisonArray);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.filter(elem =&gt; !hash.has(elem));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 比起命令式我更喜欢函数式编程 ###

函数式变编程可以让代码的逻辑更清晰更优雅，方便测试。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const programmerOutput = [</code> <code>&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Uncle Bobby'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 500</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Suzie Q'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 1500</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Jimmy Gosling'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 150</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Gracie Hopper'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 1000</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>];</code> <code>let totalOutput = 0;</code> <code>for</code> <code>(let i = 0; i &lt; programmerOutput.length; i++) { </code> <code>&nbsp;&nbsp;</code><code>totalOutput += programmerOutput[i].linesOfCode;</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const programmerOutput = [</code> <code>&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Uncle Bobby'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 500</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Suzie Q'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 1500</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Jimmy Gosling'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 150</code> <code>&nbsp;&nbsp;</code><code>}, { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Gracie Hopper'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>linesOfCode: 1000</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>];</code> <code>let totalOutput = programmerOutput</code> <code>&nbsp;&nbsp;</code><code>.map(output =&gt; output.linesOfCode)</code> <code>&nbsp;&nbsp;</code><code>.reduce((totalLines, lines) =&gt; totalLines + lines, 0)</code> </td> 
 </tr> 
 </tbody> 
</table>

### 封装条件语句 ###

### Bad: ###

<table> 
 <tbody> 
 <tr> 
 <td> <code>if</code> <code>(fsm.state === </code><code>'fetching'</code> <code>&amp;&amp; isEmpty(listNode)) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### Good: ###

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 持保留意见</code> <code>function</code> <code>shouldShowSpinner(fsm, listNode) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>fsm.state === </code><code>'fetching'</code> <code>&amp;&amp; isEmpty(listNode);</code> <code>}</code> <code>if</code> <code>(shouldShowSpinner(fsmInstance, listNodeInstance)) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 尽量别用“非”条件句 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>isDOMNodeNotPresent(node) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>if</code> <code>(!isDOMNodeNotPresent(node)) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>isDOMNodePresent(node) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>if</code> <code>(isDOMNodePresent(node)) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免使用条件语句 ###

Q：不用条件语句写代码是不可能的。

A：绝大多数场景可以用多态替代。

Q：用多态可行，但为什么就不能用条件语句了呢？

A：为了让代码更简洁易读，如果你的函数中出现了条件判断，那么说明你的函数不止干了一件事情，违反了函数单一原则。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Airplane { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>// 获取巡航高度</code> <code>&nbsp;&nbsp;</code><code>getCruisingAltitude() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>switch</code> <code>(</code><code>this</code><code>.type) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code> <code>'777'</code><code>:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getPassengerCount();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code> <code>'Air Force One'</code><code>:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>case</code> <code>'Cessna'</code><code>:</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getFuelExpenditure();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Airplane { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>// 波音777</code> <code>class Boeing777 extends Airplane { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>getCruisingAltitude() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getPassengerCount();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 空军一号</code> <code>class AirForceOne extends Airplane { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>getCruisingAltitude() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 赛纳斯飞机</code> <code>class Cessna extends Airplane { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>getCruisingAltitude() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getFuelExpenditure();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 利用对象使用分支判断</code> <code>var</code> <code>Airplane = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'777'</code><code>: </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getPassengerCount();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'Air Force One'</code><code>: </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'Cessna'</code><code>: </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.getMaxAltitude() - </code><code>this</code><code>.getFuelExpenditure();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免类型检查（第一部分） ###

JavaScript 是无类型的，意味着你可以传任意类型参数，这种自由度很容易让人困扰，不自觉的就会去检查类型。仔细想想是你真的需要检查类型还是你的 API 设计有问题？（注：持保留意见）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>travelToTexas(vehicle) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(vehicle </code><code>instanceof</code> <code>Bicycle) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>vehicle.pedal(</code><code>this</code><code>.currentLocation, </code><code>new</code> <code>Location(</code><code>'texas'</code><code>));</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>if</code> <code>(vehicle </code><code>instanceof</code> <code>Car) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>vehicle.drive(</code><code>this</code><code>.currentLocation, </code><code>new</code> <code>Location(</code><code>'texas'</code><code>));</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>travelToTexas(vehicle) { </code> <code>&nbsp;&nbsp;</code><code>vehicle.move(</code><code>this</code><code>.currentLocation, </code><code>new</code> <code>Location(</code><code>'texas'</code><code>));</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 避免类型检查（第二部分） ###

如果你需要做静态类型检查，比如字符串、整数等，推荐使用 TypeScript，不然你的代码会变得又臭又长。

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>combine(val1, val2) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>typeof</code> <code>val1 === </code><code>'number'</code> <code>&amp;&amp; </code><code>typeof</code> <code>val2 === </code><code>'number'</code> <code>||</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>typeof</code> <code>val1 === </code><code>'string'</code> <code>&amp;&amp; </code><code>typeof</code> <code>val2 === </code><code>'string'</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>val1 + val2;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>throw</code> <code>new</code> <code>Error(</code><code>'Must be of type String or Number'</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>combine(val1, val2) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>val1 + val2;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 不要过度优化 ###

现代浏览器已经在底层做了很多优化，过去的很多优化方案都是无效的，会浪费你的时间，想知道现代浏览器优化了哪些内容，请点这里。（注：持保留意见，低版本的浏览器没有做该优化，虽然性能提升不大，但这是一个好的编码习惯）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 在老的浏览器中，由于 `list.length` 没有做缓存，每次迭代都会去计算，造成不必要开销。</code> <code>// 现代浏览器已对此做了优化。</code> <code>for</code> <code>(let i = 0, len = list.length; i &lt; len; i++) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>for</code> <code>(let i = 0; i &lt; list.length; i++) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 删除弃用代码 ###

很多时候有些代码已经没有用了，但担心以后会用，舍不得删。

如果你忘了这件事，这些代码就永远存在那里了。

放心删吧，你可以在代码库历史版本中找他它。

（持保留意见，因为保留部分注释的重要代码是以防出现问题可以直接线上恢复代码而不用上紧急版本）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>oldRequestModule(url) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>function</code> <code>newRequestModule(url) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>const req = newRequestModule;</code> <code>inventoryTracker(</code><code>'apples'</code><code>, req, </code><code>'www.inventory-awesome.io'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>newRequestModule(url) { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>const req = newRequestModule;</code> <code>inventoryTracker(</code><code>'apples'</code><code>, req, </code><code>'www.inventory-awesome.io'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

## 对象和数据结构 ##

### 用 get、set 方法操作数据 ###

这样做可以带来很多好处，比如在操作数据时打日志，方便跟踪错误；在 set 的时候很容易对数据进行校验…

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>makeBankAccount() { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>balance: 0,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>const account = makeBankAccount();</code> <code>account.balance = 100;</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>makeBankAccount() { </code> <code>&nbsp;&nbsp;</code><code>// 私有变量</code> <code>&nbsp;&nbsp;</code><code>let balance = 0;</code> <code>&nbsp;&nbsp;</code><code>function</code> <code>getBalance() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>balance;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>function</code> <code>setBalance(amount) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ... 在更新 balance 前，对 amount 进行校验</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>balance = amount;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>getBalance,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setBalance,</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>const account = makeBankAccount();</code> <code>account.setBalance(100);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 使用私有变量 ###

可以用闭包来创建私有变量

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const Employee = </code><code>function</code><code>(name) { </code> <code>&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code> <code>};</code> <code>Employee.prototype.getName = </code><code>function</code> <code>getName() { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.name;</code> <code>};</code> <code>const employee = </code><code>new</code> <code>Employee(</code><code>'John Doe'</code><code>);</code> <code>console.log(`Employee name: ${employee.getName()}`); </code> <code>// Employee name: John Doe</code> <code>delete</code> <code>employee.name;</code> <code>console.log(`Employee name: ${employee.getName()}`);</code> <code>&nbsp;</code><code>// Employee name: undefined</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>makeEmployee(name) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>getName() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>}</code> <code>const employee = makeEmployee(</code><code>'John Doe'</code><code>);</code> <code>console.log(`Employee name: ${employee.getName()}`); </code> <code>// Employee name: John Doe</code> <code>delete</code> <code>employee.name;</code> <code>console.log(`Employee name: ${employee.getName()}`); </code> <code>// Employee name: John Doe</code> </td> 
 </tr> 
 </tbody> 
</table>

## 类 ##

### 使用 class ###

在 ES2015/ES6 之前，没有类的语法，只能用构造函数的方式模拟类，可读性非常差。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 动物</code> <code>const Animal = </code><code>function</code><code>(age) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(!(</code><code>this</code> <code>instanceof</code> <code>Animal)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>throw</code> <code>new</code> <code>Error(</code><code>'Instantiate Animal with `new`'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.age = age;</code> <code>};</code> <code>Animal.prototype.move = </code><code>function</code> <code>move() {};</code> <code>// 哺乳动物</code> <code>const Mammal = </code><code>function</code><code>(age, furColor) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(!(</code><code>this</code> <code>instanceof</code> <code>Mammal)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>throw</code> <code>new</code> <code>Error(</code><code>'Instantiate Mammal with `new`'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>Animal.call(</code><code>this</code><code>, age);</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.furColor = furColor;</code> <code>};</code> <code>Mammal.prototype = Object.create(Animal.prototype);</code> <code>Mammal.prototype.constructor = Mammal;</code> <code>Mammal.prototype.liveBirth = </code><code>function</code> <code>liveBirth() {};</code> <code>// 人类</code> <code>const Human = </code><code>function</code><code>(age, furColor, languageSpoken) { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(!(</code><code>this</code> <code>instanceof</code> <code>Human)) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>throw</code> <code>new</code> <code>Error(</code><code>'Instantiate Human with `new`'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>Mammal.call(</code><code>this</code><code>, age, furColor);</code> <code>&nbsp;&nbsp;</code><code>this</code><code>.languageSpoken = languageSpoken;</code> <code>};</code> <code>Human.prototype = Object.create(Mammal.prototype);</code> <code>Human.prototype.constructor = Human;</code> <code>Human.prototype.speak = </code><code>function</code> <code>speak() {};</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 动物</code> <code>class Animal { </code> <code>&nbsp;&nbsp;</code><code>constructor(age) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.age = age</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>move() {};</code> <code>}</code> <code>// 哺乳动物</code> <code>class Mammal extends Animal{ </code> <code>&nbsp;&nbsp;</code><code>constructor(age, furColor) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>(age);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.furColor = furColor;</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>liveBirth() {};</code> <code>}</code> <code>// 人类</code> <code>class Human extends Mammal{ </code> <code>&nbsp;&nbsp;</code><code>constructor(age, furColor, languageSpoken) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>(age, furColor);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.languageSpoken = languageSpoken;</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>speak() {};</code> </td> 
 </tr> 
 </tbody> 
</table>

### 链式调用 ###

这种模式相当有用，可以在很多库中发现它的身影，比如 jQuery、Lodash 等。它让你的代码简洁优雅。实现起来也非常简单，在类的方法最后返回 this 可以了。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Car { </code> <code>&nbsp;&nbsp;</code><code>constructor(make, model, color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.make = make;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.model = model;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.color = color;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setMake(make) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.make = make;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setModel(model) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.model = model;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setColor(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.color = color;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>save() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.make, </code><code>this</code><code>.model, </code><code>this</code><code>.color);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const car = </code><code>new</code> <code>Car(</code><code>'Ford'</code><code>,</code><code>'F-150'</code><code>,</code><code>'red'</code><code>);</code> <code>car.setColor(</code><code>'pink'</code><code>);</code> <code>car.save();</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Car { </code> <code>&nbsp;&nbsp;</code><code>constructor(make, model, color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.make = make;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.model = model;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.color = color;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setMake(make) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.make = make;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setModel(model) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.model = model;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setColor(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.color = color;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>save() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.make, </code><code>this</code><code>.model, </code><code>this</code><code>.color);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const car = </code><code>new</code> <code>Car(</code><code>'Ford'</code><code>,</code><code>'F-150'</code><code>,</code><code>'red'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>.setColor(</code><code>'pink'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>.save();</code> </td> 
 </tr> 
 </tbody> 
</table>

### 不要滥用继承 ###

很多时候继承被滥用，导致可读性很差，要搞清楚两个类之间的关系，继承表达的一个属于关系，而不是包含关系，比如 Human->Animal vs. User->UserDetails

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Employee { </code> <code>&nbsp;&nbsp;</code><code>constructor(name, email) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.email = email;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>// TaxData（税收信息）并不是属于 Employee（雇员），而是包含关系。</code> <code>class EmployeeTaxData extends Employee { </code> <code>&nbsp;&nbsp;</code><code>constructor(ssn, salary) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ssn = ssn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.salary = salary;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class EmployeeTaxData { </code> <code>&nbsp;&nbsp;</code><code>constructor(ssn, salary) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.ssn = ssn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.salary = salary;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> <code>class Employee { </code> <code>&nbsp;&nbsp;</code><code>constructor(name, email) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.email = email;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setTaxData(ssn, salary) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.taxData = </code><code>new</code> <code>EmployeeTaxData(ssn, salary);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

## SOLID ##

SOLID 是几个单词首字母组合而来，分别表示 单一功能原则、开闭原则、里氏替换原则、接口隔离原则以及依赖反转原则。

### 单一功能原则 The Single Responsibility Principle ###

如果一个类干的事情太多太杂，会导致后期很难维护。我们应该厘清职责，各司其职减少相互之间依赖。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class UserSettings { </code> <code>&nbsp;&nbsp;</code><code>constructor(user) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.user = user;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>changeSettings(settings) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>this</code><code>.verifyCredentials()) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>verifyCredentials() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class UserAuth { </code> <code>&nbsp;&nbsp;</code><code>constructor(user) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.user = user;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>verifyCredentials() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class UserSetting { </code> <code>&nbsp;&nbsp;</code><code>constructor(user) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.user = user;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.auth = </code><code>new</code> <code>UserAuth(</code><code>this</code><code>.user);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>changeSettings(settings) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>this</code><code>.auth.verifyCredentials()) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 开闭原则 The Open Closed Principle ###

“开”指的就是类、模块、函数都应该具有可扩展性，“闭”指的是它们不应该被修改。也就是说你可以新增功能但不能去修改源码。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class AjaxAdapter extends Adapter { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>'ajaxAdapter'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class NodeAdapter extends Adapter { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>'nodeAdapter'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class HttpRequester { </code> <code>&nbsp;&nbsp;</code><code>constructor(adapter) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.adapter = adapter;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>fetch(url) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>this</code><code>.adapter.name === </code><code>'ajaxAdapter'</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>makeAjaxCall(url).then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 传递 response 并 return</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>if</code> <code>(</code><code>this</code><code>.adapter.name === </code><code>'httpNodeAdapter'</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>makeHttpCall(url).then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 传递 response 并 return</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>function</code> <code>makeAjaxCall(url) { </code> <code>&nbsp;&nbsp;</code><code>// 处理 request 并 return promise</code> <code>}</code> <code>function</code> <code>makeHttpCall(url) { </code> <code>&nbsp;&nbsp;</code><code>// 处理 request 并 return promise</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class AjaxAdapter extends Adapter { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>'ajaxAdapter'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>request(url) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 处理 request 并 return promise</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class NodeAdapter extends Adapter { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.name = </code><code>'nodeAdapter'</code><code>;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>request(url) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 处理 request 并 return promise</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class HttpRequester { </code> <code>&nbsp;&nbsp;</code><code>constructor(adapter) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.adapter = adapter;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>fetch(url) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.adapter.request(url).then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 传递 response 并 return</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 里氏替换原则 Liskov Substitution Principle ###

名字很唬人，其实道理很简单，就是子类不要去重写父类的方法。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 长方形</code> <code>class Rectangle { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.width = 0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.height = 0;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setColor(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>render(area) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setWidth(width) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.width = width;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setHeight(height) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.height = height;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getArea() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.width * </code><code>this</code><code>.height;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 正方形</code> <code>class Square extends Rectangle { </code> <code>&nbsp;&nbsp;</code><code>setWidth(width) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.width = width;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.height = width;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setHeight(height) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.width = height;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.height = height;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>function</code> <code>renderLargeRectangles(rectangles) { </code> <code>&nbsp;&nbsp;</code><code>rectangles.forEach((rectangle) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rectangle.setWidth(4);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rectangle.setHeight(5);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const area = rectangle.getArea(); </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>rectangle.render(area);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> <code>const rectangles = [</code><code>new</code> <code>Rectangle(), </code><code>new</code> <code>Rectangle(), </code><code>new</code> <code>Square()];</code> <code>renderLargeRectangles(rectangles);</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Shape { </code> <code>&nbsp;&nbsp;</code><code>setColor(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>render(area) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class Rectangle extends Shape { </code> <code>&nbsp;&nbsp;</code><code>constructor(width, height) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.width = width;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.height = height;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getArea() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.width * </code><code>this</code><code>.height;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class Square extends Shape { </code> <code>&nbsp;&nbsp;</code><code>constructor(length) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.length = length;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getArea() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.length * </code><code>this</code><code>.length;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>function</code> <code>renderLargeShapes(shapes) { </code> <code>&nbsp;&nbsp;</code><code>shapes.forEach((shape) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const area = shape.getArea();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>shape.render(area);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>}</code> <code>const shapes = [</code><code>new</code> <code>Rectangle(4, 5), </code><code>new</code> <code>Rectangle(4, 5), </code><code>new</code> <code>Square(5)];</code> <code>renderLargeShapes(shapes);</code> </td> 
 </tr> 
 </tbody> 
</table>

### 接口隔离原则 The Interface Segregation Principle ###

JavaScript 几乎没有接口的概念，所以这条原则很少被使用。官方定义是“客户端不应该依赖它不需要的接口”，也就是接口最小化，把接口解耦。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class DOMTraverser { </code> <code>&nbsp;&nbsp;</code><code>constructor(settings) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.settings = settings;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setup();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setup() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.rootNode = </code><code>this</code><code>.settings.rootNode;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.animationModule.setup();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>traverse() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const $ = </code><code>new</code> <code>DOMTraverser({ </code> <code>&nbsp;&nbsp;</code><code>rootNode: document.getElementsByTagName(</code><code>'body'</code><code>),</code> <code>&nbsp;&nbsp;</code><code>animationModule() {} </code><code>// Most of the time, we won't need to animate when traversing.</code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class DOMTraverser { </code> <code>&nbsp;&nbsp;</code><code>constructor(settings) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.settings = settings;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.options = settings.options;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setup();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setup() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.rootNode = </code><code>this</code><code>.settings.rootNode;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setupOptions();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>setupOptions() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(</code><code>this</code><code>.options.animationModule) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>traverse() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const $ = </code><code>new</code> <code>DOMTraverser({ </code> <code>&nbsp;&nbsp;</code><code>rootNode: document.getElementsByTagName(</code><code>'body'</code><code>),</code> <code>&nbsp;&nbsp;</code><code>options: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>animationModule() {}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

### 依赖倒置原则 The Dependency Inversion Principle ###

说就两点：

*  高层次模块不能依赖低层次模块，它们依赖于抽象接口。
 *  抽象接口不能依赖具体实现，具体实现依赖抽象接口。

总结下来就两个字，解耦。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 库存查询</code> <code>class InventoryRequester { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.REQ_METHODS = [</code><code>'HTTP'</code><code>];</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>requestItem(item) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 库存跟踪</code> <code>class InventoryTracker { </code> <code>&nbsp;&nbsp;</code><code>constructor(items) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.items = items;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 这里依赖一个特殊的请求类，其实我们只是需要一个请求方法。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.requester = </code><code>new</code> <code>InventoryRequester();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>requestItems() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.items.forEach((item) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.requester.requestItem(item);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const inventoryTracker = </code><code>new</code> <code>InventoryTracker([</code><code>'apples'</code><code>, </code><code>'bananas'</code><code>]);</code> <code>inventoryTracker.requestItems();</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>// 库存跟踪</code> <code>class InventoryTracker { </code> <code>&nbsp;&nbsp;</code><code>constructor(items, requester) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.items = items;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.requester = requester;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>requestItems() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.items.forEach((item) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.requester.requestItem(item);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// HTTP 请求</code> <code>class InventoryRequesterHTTP { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.REQ_METHODS = [</code><code>'HTTP'</code><code>];</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>requestItem(item) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// webSocket 请求</code> <code>class InventoryRequesterWS { </code> <code>&nbsp;&nbsp;</code><code>constructor() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.REQ_METHODS = [</code><code>'WS'</code><code>];</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>requestItem(item) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>// 通过依赖注入的方式将请求模块解耦，这样我们就可以很轻易的替换成 webSocket 请求。</code> <code>const inventoryTracker = </code><code>new</code> <code>InventoryTracker([</code><code>'apples'</code><code>, </code><code>'bananas'</code><code>], </code><code>new</code> <code>InventoryRequesterHTTP());</code> <code>inventoryTracker.requestItems();</code> </td> 
 </tr> 
 </tbody> 
</table>

## 测试 ##

随着项目变得越来越庞大，时间线拉长，有的老代码可能半年都没碰过，如果此时上线，你有信心这部分代码能正常工作吗？测试的覆盖率和你的信心是成正比的。

PS: 如果你发现你的代码很难被测试，那么你应该优化你的代码了。

### 单一化 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>import assert from </code><code>'assert'</code><code>;</code> <code>describe(</code><code>'MakeMomentJSGreatAgain'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>it(</code><code>'handles date boundaries'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let date;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'1/1/2015'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(30);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'1/31/2015'</code><code>, date);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'2/1/2016'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(28);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'02/29/2016'</code><code>, date);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'2/1/2015'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(28);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'03/01/2015'</code><code>, date);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>import assert from </code><code>'assert'</code><code>;</code> <code>describe(</code><code>'MakeMomentJSGreatAgain'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;</code><code>it(</code><code>'handles 30-day months'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'1/1/2015'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(30);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'1/31/2015'</code><code>, date);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>it(</code><code>'handles leap year'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'2/1/2016'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(28);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'02/29/2016'</code><code>, date);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>it(</code><code>'handles non-leap year'</code><code>, () =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const date = </code><code>new</code> <code>MakeMomentJSGreatAgain(</code><code>'2/1/2015'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>date.addDays(28);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>assert.equal(</code><code>'03/01/2015'</code><code>, date);</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

## 异步 ##

### 不再使用回调 ###

不会有人愿意去看嵌套回调的代码，用 Promises 替代回调吧。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>import { get } from </code><code>'request'</code><code>;</code> <code>import { writeFile } from </code><code>'fs'</code><code>;</code> <code>get(</code><code>'<a href="https://en.wikipedia.org/wiki/Robert_Cecil_Martin" rel="nofollow">https://en.wikipedia.org/wiki/Robert_Cecil_Martin</a>'</code><code>, (requestErr, response) =&gt; { </code> <code>&nbsp;&nbsp;</code><code>if</code> <code>(requestErr) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(requestErr);</code> <code>&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>writeFile(</code><code>'article.html'</code><code>, response.body, (writeErr) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(writeErr) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(writeErr);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'File written'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>get(</code><code>'<a href="https://en.wikipedia.org/wiki/Robert_Cecil_Martin" rel="nofollow">https://en.wikipedia.org/wiki/Robert_Cecil_Martin</a>'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>.then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>writeFile(</code><code>'article.html'</code><code>, response);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>.then(() =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'File written'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(err);</code> <code>&nbsp;&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

### Async/Await 比起 Promises 更简洁 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>import { get } from </code><code>'request-promise'</code><code>;</code> <code>import { writeFile } from </code><code>'fs-promise'</code><code>;</code> <code>get(</code><code>'<a href="https://en.wikipedia.org/wiki/Robert_Cecil_Martin" rel="nofollow">https://en.wikipedia.org/wiki/Robert_Cecil_Martin</a>'</code><code>)</code> <code>&nbsp;&nbsp;</code><code>.then((response) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>writeFile(</code><code>'article.html'</code><code>, response);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>.then(() =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'File written'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>.</code><code>catch</code><code>((err) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(err);</code> <code>&nbsp;&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>import { get } from </code><code>'request-promise'</code><code>;</code> <code>import { writeFile } from </code><code>'fs-promise'</code><code>;</code> <code>async </code><code>function</code> <code>getCleanCodeArticle() { </code> <code>&nbsp;&nbsp;</code><code>try</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const response = await get(</code><code>'<a href="https://en.wikipedia.org/wiki/Robert_Cecil_Martin" rel="nofollow">https://en.wikipedia.org/wiki/Robert_Cecil_Martin</a>'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>await writeFile(</code><code>'article.html'</code><code>, response);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'File written'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>} </code><code>catch</code><code>(err) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(err);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

## 错误处理 ##

### 不要忽略抛异常 ###

**Bad:**

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>try</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>functionThatMightThrow();</code> <code>} </code><code>catch</code> <code>(error) { </code> <code>&nbsp;&nbsp;</code><code>// 这一种选择，比起 console.log 更直观</code> <code>&nbsp;&nbsp;</code><code>console.error(error);</code> <code>&nbsp;&nbsp;</code><code>// 也可以在界面上提醒用户</code> <code>&nbsp;&nbsp;</code><code>notifyUserOfError(error);</code> <code>&nbsp;&nbsp;</code><code>// 也可以把异常传回服务器</code> <code>&nbsp;&nbsp;</code><code>reportErrorToService(error);</code> <code>&nbsp;&nbsp;</code><code>// 其他的自定义方法</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 不要忘了在 Promises 抛异常 ###

**Bad:**

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>getdata()</code> <code>&nbsp;&nbsp;</code><code>.then((data) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>functionThatMightThrow(data);</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code><code>.</code><code>catch</code><code>((error) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 这一种选择，比起 console.log 更直观</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.error(error);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 也可以在界面上提醒用户</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>notifyUserOfError(error);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 也可以把异常传回服务器</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reportErrorToService(error);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 其他的自定义方法</code> <code>&nbsp;&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

## 代码风格 ##

代码风格是主观的，争论哪种好哪种不好是在浪费生命。市面上有很多自动处理代码风格的工具，选一个喜欢就行了，我们来讨论几个非自动处理的部分。

### 常量大写 ###

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const DAYS_IN_WEEK = 7;</code> <code>const daysInMonth = 30;</code> <code>const songs = [</code><code>'Back In Black'</code><code>, </code><code>'Stairway to Heaven'</code><code>, </code><code>'Hey Jude'</code><code>];</code> <code>const Artists = [</code><code>'ACDC'</code><code>, </code><code>'Led Zeppelin'</code><code>, </code><code>'The Beatles'</code><code>];</code> <code>function</code> <code>eraseDatabase() {}</code> <code>function</code> <code>restore_database() {}</code> <code>class animal {}</code> <code>class Alpaca {}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>const DAYS_IN_WEEK = 7;</code> <code>const DAYS_IN_MONTH = 30;</code> <code>const SONGS = [</code><code>'Back In Black'</code><code>, </code><code>'Stairway to Heaven'</code><code>, </code><code>'Hey Jude'</code><code>];</code> <code>const ARTISTS = [</code><code>'ACDC'</code><code>, </code><code>'Led Zeppelin'</code><code>, </code><code>'The Beatles'</code><code>];</code> <code>function</code> <code>eraseDatabase() {}</code> <code>function</code> <code>restoreDatabase() {}</code> <code>class Animal {}</code> <code>class Alpaca {}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 先声明后调用 ###

就像我们看报纸文章一样，从上到下看，所以为了方便阅读把函数声明写在函数调用前面。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class PerformanceReview { </code> <code>&nbsp;&nbsp;</code><code>constructor(employee) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.employee = employee;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>lookupPeers() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>db.lookup(</code><code>this</code><code>.employee, </code><code>'peers'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>lookupManager() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>db.lookup(</code><code>this</code><code>.employee, </code><code>'manager'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getPeerReviews() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const peers = </code><code>this</code><code>.lookupPeers();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>perfReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getPeerReviews();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getManagerReview();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getSelfReview();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getManagerReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const manager = </code><code>this</code><code>.lookupManager();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getSelfReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const review = </code><code>new</code> <code>PerformanceReview(employee);</code> <code>review.perfReview();</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>class PerformanceReview { </code> <code>&nbsp;&nbsp;</code><code>constructor(employee) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.employee = employee;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>perfReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getPeerReviews();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getManagerReview();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.getSelfReview();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getPeerReviews() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const peers = </code><code>this</code><code>.lookupPeers();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>lookupPeers() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>db.lookup(</code><code>this</code><code>.employee, </code><code>'peers'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getManagerReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const manager = </code><code>this</code><code>.lookupManager();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>lookupManager() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>db.lookup(</code><code>this</code><code>.employee, </code><code>'manager'</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getSelfReview() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// ...</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>const review = </code><code>new</code> <code>PerformanceReview(employee);</code> <code>review.perfReview();</code> </td> 
 </tr> 
 </tbody> 
</table>

## 注释 ##

### 只有业务逻辑需要注释 ###

代码注释不是越多越好。（注：语义化的命名可以减少很多不必要的注释，最好的代码是自解释的，不要过分地追求注释，影响代码的阅读。）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>hashIt(data) { </code> <code>&nbsp;&nbsp;</code><code>// 这是初始值</code> <code>&nbsp;&nbsp;</code><code>let hash = 0;</code> <code>&nbsp;&nbsp;</code><code>// 数组的长度</code> <code>&nbsp;&nbsp;</code><code>const length = data.length;</code> <code>&nbsp;&nbsp;</code><code>// 循环数组</code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(let i = 0; i &lt; length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 获取字符代码</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const char = data.charCodeAt(i);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 修改 hash</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hash = ((hash &lt;&lt; 5) - hash) + char;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 转换为32位整数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hash &amp;= hash;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>hashIt(data) { </code> <code>&nbsp;&nbsp;</code><code>let hash = 0;</code> <code>&nbsp;&nbsp;</code><code>const length = data.length;</code> <code>&nbsp;&nbsp;</code><code>for</code> <code>(let i = 0; i &lt; length; i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const char = data.charCodeAt(i);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hash = ((hash &lt;&lt; 5) - hash) + char;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 转换为32位整数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hash &amp;= hash;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 删掉注释的代码 ###

git 存在的意义就是保存你的旧代码，所以注释的代码赶紧删掉吧。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>doStuff();</code> <code>// doOtherStuff();</code> <code>// doSomeMoreStuff();</code> <code>// doSoMuchStuff();</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>doStuff();</code> </td> 
 </tr> 
 </tbody> 
</table>

javascript

不要记日记  
记住你有 git！，git log 可以帮你干这事。

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>/**</code> <code>&nbsp;</code><code>* 2016-12-20: 删除了 xxx</code> <code>&nbsp;</code><code>* 2016-10-01: 改进了 xxx</code> <code>&nbsp;</code><code>* 2016-02-03: 删除了第12行的类型检查</code> <code>&nbsp;</code><code>* 2015-03-14: 增加了一个合并的方法</code> <code>&nbsp;</code><code>*/</code> <code>function</code> <code>combine(a, b) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>a + b;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code> <code>combine(a, b) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>a + b;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 注释不需要高亮 ###

注释高亮，并不能起到提示的作用，反而会干扰你阅读代码。（注：在联调或临时修改代码调试的时候可以用此方法引起自己的注意，保证在提交代码的时候可以注意到此处，不会造成调试代码的提交）

**Bad:**

<table> 
 <tbody> 
 <tr> 
 <td> <code></code> <code>// Scope Model Instantiation</code> <code></code> <code>$scope.model = { </code> <code>&nbsp;&nbsp;</code><code>menu: </code><code>'foo'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>nav: </code><code>'bar'</code> <code>};</code> <code></code> <code>// Action setup</code> <code></code> <code>const actions = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

**Good:**

<table> 
 <tbody> 
 <tr> 
 <td> <code>$scope.model = { </code> <code>&nbsp;&nbsp;</code><code>menu: </code><code>'foo'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>nav: </code><code>'bar'</code> <code>};</code> <code>const actions = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>// ...</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

喜欢我的文章就关注我吧，持续更新中.....  
以上内容希望帮助到大家，很多朋友在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论留言 [点击进入暗号：csdn][csdn]

[csdn]: https://jq.qq.com/?_wv=1027&k=nKNuXAFr