编程技能：重构if...elseif...else...

媒介

新入职的公司，前人留下来一个项目，内里充溢着大批的if&＃8230;else&＃8230;，则却是其次，重要连解释写的都很少。面临如许的已上线的代码，我并没有想去重构他由于本钱太高，只好推动本身不要写出这类代码

面临的问题？

有时候，我们能够面临如许的营业逻辑。(公司项目的营业逻辑)，假如是回复过问题经由过程，假如回复过问题没有经由过程，假如没有回复过问题。假如不运用特定的形式，能够会写出下面如许的代码。一坨一坨的if&＃8230;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 // 假如返回true
if (rules[i].match(an, old)) {
rules[i].action(an, old)
}
}
}
init(isAnswer, isOldUser)

&＃x2b06;&＃xfe0f;上面庞杂的状况，也能够吧action的推断抽离出来然则能够要写出三个抽离的函数，由于an值有三种差别的状况

处理办法2: 面向切面的编程(AOP)

为Function的原型链，扩大after语法，假如满足要求直接在函数内运算并返回效果。假如不满足前提返回&＃8217;next&＃8217;挪用职责链的下一个节点。所谓的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等函数式编程库处理这类问题, &＃x1f517;链接：
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'