共计 4612 个字符，预计需要花费 12 分钟才能阅读完成。
《重构 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》也不例外，在看这本书的时候肯定要带着批判性的眼光去浏览它。
外面介绍的重构手法有很多，多达上百种，但这些手法不肯定实用所有人。所以肯定要有取舍，将外面有用的手法摘抄下来，时不时的看几遍。这样在写代码时，重构能力像呼吸一样天然，即应用了你也不晓得。
参考资料
- 《重构 2》
带你入门前端工程 全文目录：
- 技术选型：如何进行技术选型？
- 对立标准：如何制订标准并利用工具保障标准被严格执行？
- 前端组件化：什么是模块化、组件化？
- 测试：如何写单元测试和 E2E（端到端）测试？
- 构建工具：构建工具有哪些？都有哪些性能和劣势？
- 自动化部署：如何利用 Jenkins、Github Actions 自动化部署我的项目？
- 前端监控：解说前端监控原理及如何利用 sentry 对我的项目履行监控。
- 性能优化（一）：如何检测网站性能？有哪些实用的性能优化规定？
- 性能优化（二）：如何检测网站性能？有哪些实用的性能优化规定？
- 重构：为什么做重构？重构有哪些手法？
- 微服务：微服务是什么？如何搭建微服务项目？
- Severless：Severless 是什么？如何应用 Severless？
