《重构2》一书中对重构进行了定义：
所谓重构（refactoring）是这样一个过程：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构。重构是一种经千锤百炼形成的有条不紊的程序整理方法，可以最大限度地减小整理过程中引入错误的概率。本质上说，重构就是在代码写好之后改进它的设计。
重构和性能优化有相同点，也有不同点。
相同的地方是它们都在不改变程序功能的情况下修改代码；不同的地方是重构为了让代码变得更加容易理解、易于修改，性能优化则是为了让程序运行得更快。这里还得重点提一句，由于侧重点不同，重构可能使程序运行得更快，也可能使程序运行得更慢。
重构可以一边写代码一边重构，也可以在程序写完后，拿出一段时间专门去做重构。没有说哪个方式更好，视个人情况而定。如果你专门拿一段时间来做重构，则建议在重构一段代码后，立即进行测试。这样可以避免修改代码太多，在出错时找不到错误点。
重构的原则
- 事不过三，三则重构。即不能重复写同样的代码，在这种情况下要去重构。
- 如果一段代码让人很难看懂，那就该考虑重构了。
- 如果已经理解了代码，但是非常繁琐或者不够好，也可以重构。
- 过长的函数，需要重构。
- 一个函数最好对应一个功能，如果一个函数被塞入多个功能，那就要对它进行重构了。（4 和 5 不冲突）
- 重构的关键在于运用大量微小且保持软件行为的步骤，一步步达成大规模的修改。每个单独的重构要么很小，要么由若干小步骤组合而成。
重构的手法
在《重构2》这本书中，介绍了多达上百种重构手法。但我觉得以下八种是比较常用的：
- 提取重复代码，封装成函数
- 拆分功能太多的函数
- 变量/函数改名
- 替换算法
- 以函数调用取代内联代码
- 移动语句
- 折分嵌套条件表达式
- 将查询函数和修改函数分离
提取重复代码，封装成函数
假设有一个查询数据的接口 /getUserData?age=17&city=beijing。现在需要做的是把用户数据：{ age: 17, city: 'beijing' } 转成 URL 参数的形式：
let result = '' const keys = Object.keys(data) // { age: 17, city: 'beijing' } keys.forEach(key => { result += '&' + key + '=' + data[key] }) result.substr(1) // age=17&city=beijing
如果只有这一个接口需要转换，不封装成函数是没问题的。但如果有多个接口都有这种需求，那就得把它封装成函数了：
function JSON2Params(data) { let result = '' const keys = Object.keys(data) keys.forEach(key => { result += '&' + key + '=' + data[key] }) return result.substr(1) }
拆分功能太多的函数
下面是一个打印账单的程序：
function printBill(data = []) { // 汇总数据 const total = {} data.forEach(item => { if (total[item.department] === undefined) { total[item.department] = 0 } total[item.department] += item.value }) // 打印汇总后的数据 const keys = Object.keys(total) keys.forEach(key => { console.log(`${key} 部门：${total[key]}`) }) } printBill([ { department: '销售部', value: 89, }, { department: '后勤部', value: 132, }, { department: '财务部', value: 78, }, { department: '总经办', value: 90, }, { department: '后勤部', value: 56, }, { department: '总经办', value: 120, }, ])
可以看到这个 printBill() 函数实际上包含有两个功能：汇总和打印。我们可以把汇总数据的代码提取出来，封装成一个函数。这样 printBill() 函数就只需要关注打印功能了。
function printBill(data = []) { const total = calculateBillData(data) const keys = Object.keys(total) keys.forEach(key => { console.log(`${key} 部门：${total[key]}`) }) } function calculateBillData(data) { const total = {} data.forEach(item => { if (total[item.department] === undefined) { total[item.department] = 0 } total[item.department] += item.value }) return total }
变量/函数改名
无论是变量命名，还是函数命名，都要尽量让别人明白你这个变量/函数是干什么的。变量命名的规则着重于描述“是什么”，函数命名的规则着重于描述“做什么”。
变量
const a = width * height
上面这个变量就不太好，a 很难让人看出来它是什么。
const area = width * height
改成这样就很好理解了，原来这个变量是表示面积。
函数
function cache(data) { const result = [] data.forEach(item => { if (item.isCache) { result.push(item) } }) return result }
这个函数名称会让人很疑惑，cache 代表什么？是设置缓存还是删除缓存？再一细看代码，噢，原来是获取缓存数据。所以这个函数名称改成 getCache() 更加合适。
替换算法
function foundPersonData(person) { if (person == 'Tom') { return { name: 'Tom', age: 18, id: 21, } } if (person == 'Jim') { return { name: 'Jim', age: 20, id: 111, } } if (person == 'Lin') { return { name: 'Lin', age: 19, id: 10, } } return null }
上面这个函数的功能是根据用户姓名查找用户的详细信息，可以看到这个函数做了三次 if 判断，如果没找到数据就返回 null。这个函数不利于扩展，每多一个用户就得多写一个 if 语句，我们可以用更方便的“查找表”来替换它。
function foundPersonData(person) { const data = { 'Tom': { name: 'Tom', age: 18, id: 21, }, 'Jim': { name: 'Jim', age: 20, id: 111, }, 'Lin': { name: 'Lin', age: 19, id: 10, }, } return data[person] || null }
修改后代码结构看起来更加清晰，也方便未来做扩展。
以函数调用取代内联代码
如果一些代码所做的事情和已有函数的功能重复，那就最好用函数调用来取代这些代码。
let hasApple = false for (const fruit of fruits) { if (fruit == 'apple') { hasApple = true break } }
例如上面的代码，可以用数组的 includes() 方法代替：
const hasApple = fruits.includes('apple')
修改后代码更加简洁。
移动语句
让存在关联的东西一起出现，可以使代码更容易理解。如果有一些代码都是作用在一个地方，那么最好是把它们放在一起，而不是夹杂在其他的代码中间。最简单的情况下，只需使用移动语句就可以让它们聚集起来。就像下面的示例一样：
const name = getName() const age = getAge() let revenue const address = getAddress() // ... const name = getName() const age = getAge() const address = getAddress() let revenue // ...
由于两块数据区域的功能是不同的，所以除了移动语句外，我还在它们之间空了一行，这样让人更容易区分它们之间的不同。
折分嵌套条件表达式
当很多的条件表达式嵌套在一起时，会让代码变得很难阅读：
function getPayAmount() { if (isDead) { return deadAmount() } else { if (isSeparated) { return separatedAmount() } else if (isRetired) { return retireAmount() } else { return normalAmount() } } } function getPayAmount() { if (isDead) return deadAmount() if (isSeparated) return separatedAmount() if (isRetired) return retireAmount() return normalAmount() }
将条件表达式拆分后，代码的可阅读性大大增强了。
将查询函数和修改函数分离
一般的查询函数都是用于取值的，例如 getUserData()、getAget()、getName() 等等。有时候，我们可能为了方便，在查询函数上附加其他功能。例如下面的函数：
function getValue() { let result = 0 this.data.forEach(val => result += val) // 这里插入了一个奇怪的操作 sendBill() return result }
千万不要这样做，函数很重要的功能是职责分离。所以我们要将它们分开：
function getValue() { let result = 0 this.data.forEach(val => result += val) return result } function sendBill() { // ... }
这样函数的功能就很清晰了。
小结
古人云：尽信书，不如无书。《重构2》也不例外，在看这本书的时候一定要带着批判性的目光去阅读它。
里面介绍的重构手法有很多，多达上百种，但这些手法不一定适用所有人。所以一定要有取舍，将里面有用的手法摘抄下来，时不时的看几遍。这样在写代码时，重构才能像呼吸一样自然，即使用了你也不知道。
参考资料
带你入门前端工程 全文目录：
- 技术选型：如何进行技术选型？
- 统一规范：如何制订规范并利用工具保证规范被严格执行？
- 前端组件化：什么是模块化、组件化？
- 测试：如何写单元测试和 E2E（端到端） 测试？
- 构建工具：构建工具有哪些？都有哪些功能和优势？
- 自动化部署：如何利用 Jenkins、Github Actions 自动化部署项目？
- 前端监控：讲解前端监控原理及如何利用 sentry 对项目实行监控。
- 性能优化（一）：如何检测网站性能？有哪些实用的性能优化规则？
- 性能优化（二）：如何检测网站性能？有哪些实用的性能优化规则？
- 重构：为什么做重构？重构有哪些手法？
- 微服务：微服务是什么？如何搭建微服务项目？
- Severless：Severless 是什么？如何使用 Severless？
