前端设计模式
更多模式>>>
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导出,就能在其他地方很方便的复用。