本文出自「掘金社區」，歡迎戳「閱讀原文」連結和作者進行技術交流 🎉🎉
前言新入職的公司，前人留下來一個項目，裡面充斥著大量的 if...else...，則倒是其次，主要連注釋寫的都很少。面對這樣的已經上線的代碼，我並沒有想去重構他因為成本太高，只好鞭策自己不要寫出這種代碼
面對的問題？有時候，我們可能面對這樣的業務邏輯（教育類公司），如果是回答過題目通過，如果回答過題目沒有通過，如果沒有回答過題目。如果不使用特定的模式，可能會寫出下面這樣的代碼。一坨一坨的 if...else 看著非常不舒服，並且難以維護。
/**
* 初始化函數
* if...else if... 的情況較為簡單
* @return undefined
*/
function init () {
// 是否回答過題目 1-回答過, 通過 2-回答過, 沒有通過 3-沒有回答過
let isAnswer
// 是否是老用戶 1-老用戶 2-新用戶
let isOldUser
if (isAnswer === 1) {
// ...
} else if (isAnswer === 2) {
// ...
} else if (isAnswer === 3) {
// ...
}
if (isOldUser === 1) {
// ...
} else if (isOldUser === 2) {
// ...
}
}
/**
* 初始化函數
* if...else if... 嵌套的情況
* @return undefined
*/
function init () {
if (isAnswer === 1) {
if (isOldUser === 1) {
// ...
} else if (isOldUser === 2) {
// ...
}
} else if (isAnswer === 2) {
if (isOldUser === 1) {
// ...
} else if (isOldUser === 2) {
// ...
}
} else if (isAnswer === 3) {
if (isOldUser === 1) {
// ...
} else if (isOldUser === 2) {
// ...
}
}
}
解決辦法1: 查找表, 職責鏈查找表雖然可能看著是治標不治本，其實不然，init 函數的複雜度大大的降低了。我們已經把控制流程的複雜邏輯，拆分到 determineAction 函數中
// 可以解決if...else if...簡單的問題
const rules = {
isAnswer1 () {
return code
},
isAnswer2 () {
return code
},
isAnswer3 () {
return code
}
}
function determineAction (type) {
if (isAnswer === 1) {
return 'isAnswer1'
} else if (isAnswer === 2) {
return 'isAnswer2'
} else if (isAnswer === 3) {
return 'isAnswer3'
}
}
function init () {
let key = determineAction(isAnswer)
return rules[key]
}
// 面對if...else if...else 嵌套的複雜情況
const rules = [
{
match (an, old) {
if (an === 1) {
return true
}
},
action (an, old) {
if (old === 1) {
// ...
} else if (old === 2) {
// ...
}
}
},
{
match (an, old) {
if (an === 2) {
return true
}
},
action (an, old) {
if (old === 1) {
// ...
} else if (old === 2) {
// ...
}
}
},
{
match (an, old) {
if (an === 3) {
return true
}
},
action (an, old) {
if (old === 1) {
// ...
} else if (old === 2) {
// ...
}
}
}
]
function init (an, old) {
for (let i = 0; i < rules.length; i++) {
// 如果返回true
if (rules[i].match(an, old)) {
rules[i].action(an, old)
}
}
}
init(isAnswer, isOldUser)
⬆️上面複雜的情況，也可以吧action的判斷抽離出來但是可能要寫出三個抽離的函數，因為an值有三種不同的情況
解決辦法2: 面向切面的編程(AOP)為 Function 的原型鏈，擴展 after 語法，如果滿足要求直接在函數內運算並返回結果。如果不滿足條件返回 'next' 調用職責鏈的下一個節點。所謂的 Function.prototype.after 就是在本函數執行前執行after添加的函數
// 可以解決if...else if...簡單的問題
Function.prototype.after = function (nextFn) {
let self = this
return function (...rest) {
let code = self(...rest)
if (code === 'next') {
return nextFn(...rest)
}
return code
}
}
// 重構原函數
function isAnswer1 (type) {
if (type === 1) {
return code
}
return 'next'
}
function isAnswer2 () {
if (type === 2) {
return code
}
return 'next'
}
function isAnswer3 () {
if (type === 3) {
return code
}
return 'next'
}
let isAnswerFn = isAnswer1.after(isAnswer2).after(isAnswer3)
isAnswerFn(isAnswer)
// 面對if...else if...else 嵌套的複雜情況
function isAnswer1 (an, old) {
if (an === 1) {
return isOldUserFn1(an, old)
}
return 'next'
}
function isAnswer2 (an, old) {
if (an === 2) {
return isOldUserFn2(an, old)
}
return 'next'
}
function isAnswer3 (an, old) {
if (an === 3) {
return isOldUserFn3(an, old)
}
return 'next'
}
/**
* isAnswer == 1 isOldUser == 1 的情況
*/
function isAnswer1IsOldUser1 (an, old) {
if (old === 1) {
return code
}
return 'next'
}
/**
* isAnswer == 1 isOldUser == 2 的情況
*/
function isAnswer1IsOldUser2 (an, old) {
if (old === 2) {
return code
}
return 'next'
}
/**
* isAnswer == 2 isOldUser == 1 的情況
*/
function isAnswer2IsOldUser1 (an, old) {
if (old === 1) {
return code
}
return 'next'
}
/**
* isAnswer == 2 isOldUser == 2 的情況
*/
function isAnswer2IsOldUser2 (an, old) {
if (old === 2) {
return code
}
return 'next'
}
/**
* isAnswer == 3 isOldUser == 1 的情況
*/
function isAnswer3IsOldUser1 (an, old) {
if (old === 1) {
return code
}
return 'next'
}
/**
* isAnswer == 3 isOldUser == 2 的情況
*/
function isAnswer3IsOldUser2 (an, old) {
if (old === 2) {
return code
}
return 'next'
}
let isAnswerFn = isAnswer1.after(isAnswer2).after(isAnswer3)
// 三條職責鏈
let isOldUserFn1 = isAnswer1IsOldUser1.after(isAnswer1IsOldUser2)
let isOldUserFn2 = isAnswer2IsOldUser1.after(isAnswer2IsOldUser2)
let isOldUserFn3 = isAnswer3IsOldUser1.after(isAnswer3IsOldUser2)
isAnswerFn(isAnswer, isOldUser)
解決辦法3: 函數式編程利用 ramda 等函數式編程庫解決這種問題, 🔗連結： http://ramda.cn/docs/#cond
import R from 'ramda'
var fn = R.cond([
[R.equals(0), R.always('water freezes at 0°C')],
[R.equals(100), R.always('water boils at 100°C')],
[R.T, temp => 'nothing special happens at ' + temp + '°C']
]);
fn(0); //=> 'water freezes at 0°C'
fn(50); //=> 'nothing special happens at 50°C'
fn(100); //=> 'water boils at 100°C'