江苏荣邦建设有限公司网站,商品列表html模板,wordpress 商务 主题,58企业网站怎么做设计模式 – 策略模式#xff08;传统面向对象与JavaScript 的对比实现#xff09; 文章目录 设计模式 -- 策略模式#xff08;传统面向对象与JavaScript 的对比实现#xff09;使用策略模式计算年终奖初级实现缺点 使用组合函数重构代码缺点 使用策略模式重构代码传统的面…设计模式 – 策略模式传统面向对象与JavaScript 的对比实现 文章目录 设计模式 -- 策略模式传统面向对象与JavaScript 的对比实现使用策略模式计算年终奖初级实现缺点 使用组合函数重构代码缺点 使用策略模式重构代码传统的面向对象的策略模式实现方法最终实现 -- JavaScript 版本的策略模式多态终极实现 -- JavaScript 版本的精简版实现 使用策略模式计算年终奖
规则根据员工的工资基数和年底绩效情况计算年终奖 初级实现 const calculateBonus function (performanceLevel, salary) {if (performanceLevel S) {return salary * 4;}if (performanceLevel A) {return salary * 3;}if (performanceLevel B) {return salary * 2;}};calculateBonus(B, 20000); // 输出:40000 calculateBonus(S, 6000); // 输出:24000缺点
多重 if else违反开发-封闭原则可维护性差复用性差 使用组合函数重构代码
使用组合函数来重构代码把各种算法封装到一个个的小函数里面这些小函数有着良好的命名可以一目了然地知道它对应着哪种算法它们也可以被复用在程序的其他地方。 const performanceS function (salary) {return salary * 4;};const performanceA function (salary) {return salary * 3;};const performanceB function (salary) {return salary * 2;};const calculateBonus function (performanceLevel, salary) {if (performanceLevel S) {return performanceS(salary);}if (performanceLevel A) {return performanceA(salary);}if (performanceLevel B) {return performanceB(salary);}};calculateBonus(A, 10000); // 输出:30000缺点
程序得到了一定的改善但这种改善非常有限我们依然没有解决最重要的问题:
calculateBonus 函数有可能越来越庞大而且在系统变化的时候缺乏弹性 使用策略模式重构代码
策略模式指的是定义一系列的算法把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题策略模式也不例外策略模式的目的就是将算法的使用与算法的实现分离开来。
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类策略类封装了具体的算法并负责具体的计算过程。 第二个部分是环境类 ContextContext 接受客户的请求随后把请求委托给某一个策略类。要做到这点说明 Context 中要维持对某个策略对象的引用。
更详细一点就是: 定义一系列的算法把它们各自封装成策略类算法被封装在策略类内部的方法里。在客户对 Context 发起请求的时候Context 总是把请求委托给这些策略对象中间的某一个进行计算。 传统的面向对象的策略模式实现方法 const performanceS function () { };performanceS.prototype.calculate function (salary) {return salary * 4;};const performanceA function () { };performanceA.prototype.calculate function (salary) {return salary * 3;};const performanceB function () { };performanceB.prototype.calculate function (salary) {return salary * 2;};const Bonus function () {this.salary null; // 原始工资this.strategy null;// 绩效等级对应的策略对象};Bonus.prototype.setSalary function (salary) {this.salary salary; // 设置员工的原始工资};Bonus.prototype.setStrategy function (strategy) {this.strategy strategy; // 设置员工绩效等级对应的策略对象};Bonus.prototype.getBonus function () { // 取得奖金数额return this.strategy.calculate(this.salary); // 把计算奖金的操作委托给对应的策略对象};const bonus new Bonus();bonus.setSalary(10000);bonus.setStrategy(new performanceS()); // 设置策略对象console.log(bonus.getBonus()); // 输出:40000 bonus.setStrategy(new performanceA()); // 设置策略对象console.log(bonus.getBonus()); // 输出:30000
可以看到通过策略模式重构之后代码变得更加清晰各个类的职责更加鲜明。 最终实现 – JavaScript 版本的策略模式 const strategies {S: function (salary) {return salary * 4;},A: function (salary) {return salary * 3;},B: function (salary) {return salary * 2;}};const calculateBonus function (level, salary) {return strategies[level](salary);};console.log(calculateBonus(S, 20000));console.log(calculateBonus(A, 10000));在 JavaScript 语言中函数也是对象所以更简单和直接的做法是把 strategy 直接定义为函数。 同样Context 也没有必要必须用 Bonus 类来表示我们依然用 calculateBonus 函数充当Context 来接受用户的请求。经过改造代码的结构变得更加简洁。 多态
通过使用策略模式重构代码我们消除了原程序中大片的条件分支语句。所有跟计算奖金有 关的逻辑不再放在 Context 中而是分布在各个策略对象中。Context 并没有计算奖金的能力而 是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我 们对这些策略对象发出“计算奖金”的请求时它们会返回各自不同的计算结果这正是对象多态性的体现也是“它们可以相互替换”的目的。替换 Context 中当前保存的策略对象便能执行不同的算法来得到我们想要的结果。 终极实现 – JavaScript 版本的精简版实现
使用 map 来做映射配置文件若以后新增规则则直接在map中增加保证了可维护性 const map {S: 4,A: 3,B: 2}const calculateBonus function (level, salary) {return map[level] * salary;};console.log(calculateBonus(S, 20000));console.log(calculateBonus(A, 10000));参考文献 JavaScript 设计模式与开发实践 by 曾探
