设计模式 -- 策略模式(传统面向对象与JavaScript 的对比实现)

news/2024/7/5 5:42:57

设计模式 – 策略模式(传统面向对象与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

缺点

  1. 多重 if else
  2. 违反开发-封闭原则,可维护性差
  3. 复用性差

使用组合函数重构代码

使用组合函数来重构代码,把各种算法封装到一个个的小函数里面,这些小函数有着良好的命名,可以一目了然地知道它对应着哪种算法,它们也可以被复用在程序的其他地方。

		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

缺点

程序得到了一定的改善,但这种改善非常有限,我们依然没有解决最重要的问题:

  1. calculateBonus 函数有可能越来越庞大
  2. 而且在系统变化的时候缺乏弹性

使用策略模式重构代码

策略模式指的是定义一系列的算法,把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。 第二个部分是环境类 Context,Context 接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明 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 曾探)


http://lihuaxi.xjx100.cn/news/1465341.html

相关文章

AJAX的POST请求在chrome浏览器报net::ERR_CONNECTION_RESET问题

背景说明 公司对前端的所有的AJAX请求做了统一的封装,因此业务上需要发起请求调用后端服务时,使用的都是公司封装好的工具。 由于ERR_CONNECTION_RESET问题比较粗,也就是说可能会有很多原因会导致浏览器报这个错,因此在网上可以…

redis--主从复制

redis主从复制 Redis 主从复制是一种用于实现数据复制和数据备份的机制,它允许将一个 Redis 服务器的数据复制到其他 Redis 服务器上。主从复制在 Redis 中通常用于构建高可用性架构、读写分离以及数据分析等场景。 主从复制的角色 主服务器(Master&a…

mongo的include方法踩坑

前言 又是不认识自己代码的一天 问题 Query query new Query(); if(StringUtils.isNotNull(reqVO.getFieldLimitList()) && reqVO.getFieldLimitList().size() > 0){for(String filedName : reqVO.getFieldLimitList()){query.fields().include(filedName);} }看到…

Golang基本语法(上)

1. 变量与常量 Golang 中的标识符与关键字 标识符 Go语言中标识符由字母数字和_(下划线)组成,并且只能以字母和_开头。 举几个例子:abc, _, _123, a123。 关键字 关键字和保留字都不建议用作变量名: Go语言中有25个关键字。 此…

Web会话技术

会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束。在一次会话中可以包含多次请求和响应 会话跟踪:一种维护浏览器状态的方法,服务器需要识别多次请求是否来自于同一浏览器,…

(杭电多校)2023“钉耙编程”中国大学生算法设计超级联赛(10)

1003 Many Topological Problems 每个节点序号和权值分开计算,两者的排列组合数相乘即为答案 对于序号的顺序,一共有n个位置,第一个位置可以放序号1,2,..n共n个点,第二个则可放置n-1个点,以此类推,排列组合数为n的阶乘 对于权值,从小到大放置,如果不考虑k的话,对于权值为x的数,…

【福建事业单位-综合基础知识】05民法典

这里写自定义目录标题 一、民法概述概念原则总结 二、自然人概念总结 三、民事法律行为总结 民法考察2-4题(重点总则篇) 一、民法概述 概念原则 总结 二、自然人 概念 总结 三、民事法律行为 总结

最新ChatGPT网站程序源码+AI系统+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧&#xff01…