媒介

新入职的公司，前人留下来一个项目，内里充溢着大批的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'