前端设计模式

更多模式>>>

1. 策略模式

1.1原有写法

const calculateSalary = function (workerLevel, workHours = 10) {
    if (workerLevel === 'high') {
        return workHours * 25
    }
    if (workerLevel === 'middle') {
        return workHours * 20
    }
    if (workerLevel === 'low') {
        return workHours * 15
    }
}
console.log(calculateSalary('high')) // 250
console.log(calculateSalary('middle')) // 200

我们可以把不变的部分和变化的部分拆分开来。

不变的部分：算法的使用方式不变，都是根据某个算法取得计算后的工资数额；
变化的部分：算法的实现。

1.2 新写法

const strategies = {
    "high": function (workHours) {
        return workHours * 25
    },
    "middle": function (workHours) {
        return workHours * 20
    },
    "low": function (workHours) {
        return workHours * 15
    },
}

const calculateSalary = function (workerLevel, workHours) {
    return strategies[workerLevel](workHours)
}
console.log(calculateSalary('high', 10)) // 250
console.log(calculateSalary('middle', 10)) // 200

1.3 优点

• 代码复杂度降低：再也不用写那么多if else了。eslint其中有一项规则配置叫圈复杂度，其中一条分支也就是一个if会让圈复杂增加1，圈复杂度高的代码不易阅读和维护，用策略模式就能很好的解决这个问题；
• 易于切换、理解和扩展：它将算法封装在独立的strategy中，比如你要在上面代码中加一个等级higher或lower，直接更改策略对象strategies就行，十分方便。
• 复用性高：策略模式中的算法可以复用在系统的其它地方，你只需要用将策略类strategies用export或者module.exports导出，就能在其他地方很方便的复用。