JavaScript策略模式

2023-09-18 10:15:00

JavaScript策略模式

1 什么是策略模式

策略模式（Strategy Pattern）是一种行为型设计模式，它定义了一系列算法，将每个算法都封装起来，并且使它们可以相互替换。

策略模式让算法独立于使用它的客户而独立变化。

2 实现一个基础的策略模式

下面以计算奖金的例子来介绍策略模式。比如说，绩效为S的人年终奖有4倍工资，绩效为A的人年终奖有3倍工资，绩效为B的人年终奖为2倍工资。

根据上述条件，我们有如下的实现，编写一个名为calcBouns的函数来计算年终奖，很显然该函数需要接受两个参数：这个人的绩效等级以及他的工资数。

var calcBonus = function (level, salary) {
  if (level === "S") {
    return salary * 4;
  }
  if (level === "A") {
    return salary * 3;
  }
  if (level === "B") {
    return salary * 2;
  }
};

这段代码虽然简单，但是存在着一些缺点：
1、calcBonus函数包含了很多if-else语句，这些语句需要覆盖所有的逻辑分支
2、缺乏弹性，如果增加了一种新的绩效等级C，或者想把绩效S的奖金系数改为5，那我们必须深入函数的内部实现
3、算法的复用性差

了解了以上代码的缺点之后，我们需要对这些代码进行重构。首先使用组合函数重构代码，我们将各种条件封装到每个函数中，使其可以被很好的复用，示例如下：

var levelS = function (salary) {
  return salary * 4;
};

var levelA = function (salary) {
  return salary * 3;
};

var levelB = function (salary) {
  return salary * 2;
};

var calcBonus = function (level, salary) {
  if (level === "S") {
    return levelS(salary);
  }
  if (level === "A") {
    return levelA(salary);
  }
  if (level === "B") {
    return levelB(salary);
  }
};

上面的代码将复用性得到了改善，但是calcBonus函数有可能会变得越来越庞大的问题没有解决，这时有更好的办法，就是使用策略模式来重构代码。

一个基于策略模式的程序至少由两部分组成：

  1. 一组策略类，策略类封装了具体的算法，并负责具体的计算过程
  2. 环境类Context，Context接受客户的请求，随后把请求委托给某一个策略类。要做到这点，说明 Context中要维持对某个策略对象的引用

首先把每种绩效的计算规则都封装在对应的策略类里面：

var levelS = function () {};
levelS.prototype.calculate = function (salary) {
  return salary * 4;
};

var levelA = function () {};
levelA.prototype.calculate = function (salary) {
  return salary * 3;
};

var levelB = function () {};
levelB.prototype.calculate = function (salary) {
  return salary * 2;
};

然后定义一个奖金类Bouns：

var 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); // 把计算奖金的操作委托给对应的策略对象
};

现在我们来完成这个例子中剩下的代码。先创建一个bonus对象，并且给bonus对象设置员工的原始工资数额，接下来把某个计算奖金的策略对象也传入bonus对象内部保存起来。当调bonus.getBonus()来计算奖金的时候，bonus对象本身并没有能力进行计算，而是把请求委托给了之前保存好的策略对象：

var bonus = new Bonus(); // 创建Bonus实例对象
bonus.setSalary(1000); // 设置员工的初始工资

bonus.setStrategy(new levelS()); // 设置策略对象
console.log(bonus.getBonus()); // 输出：4000

bonus.setStrategy(new levelA()); // 设置策略对象
console.log(bonus.getBonus()); // 输出：3000

可以看到通过策略模式重构之后，代码变得更加清晰，各个类的职责更加鲜明。

3 Javascript中策略模式

在JavaScript语言中，函数也是对象，所以更简单和直接的做法是把计算规则直接定义为对象：

var level= {
  S: function (salary) {
    return salary * 4;
  },
  A: function (salary) {
    return salary * 3;
  },
  B: function (salary) {
    return salary * 2;
  },
};

依然用calcBonus函数充当环境类Context来接受用户的请求，代码结构更加简洁：

var calceBonus = function (level, salary) {
  return level[level](salary);
};

4 使用策略模式实现缓动动画

在JavaScript中实现动画效果，可以通过连续改变元素的某个CSS属性，比如left、top、background-position来实现动画效果。

例如，编写一个动画类和缓动算法，让正方形在页面中运动起来。下面是一些常见的缓动算法，这些算法都接受4个参数，这4个参数的含义分别是：动画已消耗的时间、原始位置、目标位置、动画持续的总时间，返回的值是动画元素应该处在的当前位置。

var tween = {
  linear: function (t, b, c, d) {
    return (c * t) / d + b;
  },
  easeIn: function (t, b, c, d) {
    return c * (t /= d) * t + b;
  },
  strongEaseIn: function (t, b, c, d) {
    return c * (t /= d) * t * t * t * t + b;
  },
  strongEaseOut: function (t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  },
  sineaseIn: function (t, b, c, d) {
    return c * (t /= d) * t * t + b;
  },
  sineaseOut: function (t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b;
  },
};

现在来分析实现这个程序的思路。在运动开始之前，我们了解以下信息：

  • 动画开始时，正方形所在的原始位置
  • 正方形移动的目标位置
  • 动画开始时的准确时间点
  • 正方形运动持续的时间

随后，我们会用setInterval创建一个定时器，定时器每隔19ms循环一次。在定时器的每一帧里，我们会把动画已消耗的时间、正方形原始位置、正方形目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数，计算出正方形当前应该所在的位置。最后再更新该div对应的CSS属性，正方形就能够顺利地运动起来了。

现在我们开始编写完整的代码，首先在页面中放置一个div

<div class="div1">橘猫吃不胖</div>

.div1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: orange;
}

接下来定义Animate类，Animate的构造函数接受一个参数：即将运动起来的dom节点。Animate类的代码如下：

var Animate = function (dom) {
  this.dom = dom; // 进行运动的dom节点
  this.startTime = 0; // 动画开始时间
  this.startPos = 0; // 动画开始时，dom的初始位置
  this.endPos = 0; // 动画结束时，dom的目标位置
  this.propertyName = null; // dom节点需要被改变的css属性名
  this.easing = null; // 缓动算法
  this.duration = null; // 动画持续时间
};

接下来定义Animate.prototype.start方法，它负责启动这个动画，在动画被启动的瞬间，要记录一些信息，供缓动算法在以后计算小球当前位置的时候使用。在记录完这些信息之后，此方法还要负责启动定时器。代码如下：

// propertyName：要改变的CSS属性名，比如'left'、'top'，分别表示左右移动和上下移动
// endPos：正方形运动的目标位置
// duration：动画持续时间。
// easing：缓动算法。
Animate.prototype.start = function (propertyName, endPos, duration, easing) {
  this.startTime = +new Date(); // 动画启动时间
  this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom节点初始位置
  this.propertyName = propertyName; // dom节点需要被改变的CSS属性名
  this.endPos = endPos; // dom节点目标位置
  this.duration = duration; // 动画持续事件
  this.easing = tween[easing]; // 缓动算法

  var self = this;
  var timeId = setInterval(function () {
    // 启动定时器，开始执行动画
    if (self.step() === false) {
      // 如果动画已结束，则清除定时器
      clearInterval(timeId);
    }
  }, 19);
};

然后是定义Animate.prototype.step方法，该方法代表正方形运动的每一帧要做的事情。在此处，这个方法负责计算小球的当前位置，和调用更新CSS属性值的方法Animate.prototype.update。

// 定义正方形每一帧要做的事情
Animate.prototype.step = function () {
  var time = +new Date(); // 取得当前时间
  // 如果当前时间>动画开始时间+动画持续时间，说明动画已经结束了
  // 此时修正正方形的位置就可以了
  if (time >= this.startTime + this.duration) {
    this.update(this.endPos); // 更新正方形的CSS属性值
    return false; // 清除定时器标识
  }
  // 如果动画没有结束，根据缓动动画计算正方形的位置
  var pos = this.easing(
    time - this.startTime,
    this.startPos,
    this.endPos - this.startPos,
    this.duration
  );
  // pos为正方形当前位置
  this.update(pos); // 更新正方形的CSS属性值
};

更新CSS属性的方法：

// 更新正方形CSS属性
Animate.prototype.update = function (pos) {
  this.dom.style[this.propertyName] = pos + "px";
};

到这里缓动动画的实现就结束了，我们在页面中实验一下：

var div = document.querySelector(".div1");
var animate = new Animate(div);
// 2s内向右移动500px
animate.start("left", 500, 2000, "strongEaseOut");

在这里插入图片描述

5 使用策略模式实现表单校验

假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑：

  • 用户名不能为空
  • 密码长度不能少于6位
  • 手机号码必须符合格式

首先是一版没有引入策略模式的代码：

<form id="registerForm">
  请输入用户名：<input type="text" name="userName"/ > 请输入密码：<input
  type="text" name="password"/ > 请输入手机号码：<input type="text"
  name="phoneNumber"/ >
  <button>提交</button>
</form>

var registerForm = document.getElementById("registerForm");

registerForm.onsubmit = function () {
  if (registerForm.userName.value === "") {
    alert("用户名不能为空");
    return false;
  }
  if (registerForm.password.value.length < 6) {
    alert("密码长度不能少于 6 位");
    return false;
  }
  if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
    alert("手机号码格式不正确");
    return false;
  }
};

这段代码的缺点跟计算奖金的最初版本一模一样，接下来我们使用策略模式来重构代码。首先我们要把这些校验逻辑都封装成策略对象：

var strategies = {
  isNonEmpty: function (value, errorMsg) {
    // 字段不为空
    if (value === "") {
      return errorMsg;
    }
  },
  minLength: function (value, length, errorMsg) {
    // 输入内容限制最小长度
    if (value.length < length) {
      return errorMsg;
    }
  },
  isMobile: function (value, errorMsg) {
    // 手机号码格式是否正确
    if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  },
};

接下来我们实现环境类Context，也就是Validator类，它负责接收用户的请求并委托给strategy对象。

var Validator = function () {
  this.cache = []; // 保存校验规则
};

// 通过add添加校验方法
// dom；参与校验的表单dom，即表单字段
// rule：当前表单字段的校验规则
// errorMsg：校验未通过时返回的错误信息
Validator.prototype.add = function (dom, rule, errorMsg) {
  // rule接收xxxx:xx的形式的字符串
  var ary = rule.split(":"); // 把strategy和参数分开
  this.cache.push(function () {
    // 把校验的步骤用空函数包装起来，并且放入cache
    var strategy = ary.shift(); // 用户挑选的strategy
    ary.unshift(dom.value); // 把表单项的value添加进参数列表
    ary.push(errorMsg); // 把errorMsg添加进参数列表
    return strategies[strategy].apply(dom, ary);
  });
};

// 启动校验规则
Validator.prototype.start = function () {
  // 根据校验规则的数量，挨个检验
  for (var i = 0, validatorFunc; (validatorFunc = this.cache[i++]); ) {
    var msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
    if (msg) {
      // 如果有确切的返回值，说明校验没有通过
      return msg;
    }
  }
};

到这里就使用策略模式改写完成了，接下来使用一下，给提交按钮绑定submit事件，其中包含校验表单的逻辑：

// 提交表单时校验每个字段
var validataFunc = function () {
  var validator = new Validator(); // 创建一个validator对象

  // 添加一些校验规则
  validator.add(registerForm.userName, "isNonEmpty", "用户名不能为空");
  validator.add(
    registerForm.password,
    "minLength:6",
    "密码长度不能少于 6 位"
  );
  validator.add(
    registerForm.phoneNumber,
    "isMobile",
    "手机号码格式不正确"
  );

  var errorMsg = validator.start(); // 获得校验结果
  return errorMsg; // 返回校验结果
};

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function () {
  var errorMsg = validataFunc(); // 如果errorMsg有确切的返回值，说明未通过校验
  if (errorMsg) {
    alert(errorMsg);
    return false; // 阻止表单提交
  }
};

在这里插入图片描述

更多推荐

c++ 学习 之 静态存储区域 和常量字符串的联系

什么是静态存储区域静态存储区域（StaticStorageArea）是计算机程序运行时用于存储全局变量、静态变量和字符串字面值等数据的一种特殊内存区域。静态存储区域具有以下特点：生存周期：静态存储区域中的数据在程序启动时分配，在程序结束时才会释放。这意味着这些数据在整个程序的执行期间都存在，不会随着函数的调用而创建或销

备战2024秋招面试题-查看Linux的进程

前言：\textcolor{Green}{前言：}前言：💞快秋招了，那么这个专栏就专门来记录一下，同时呢整理一下常见面试题💞部分题目来自自己的面试题，部分题目来自网络整理给我冲学习目标：面试题：算法题：完成？学习目标：Linux有哪些命令查看Linux的进程算法题：排序链表面试题：Linux有那些命令？文件和目录管

四川百幕晟科技：抖店精选联盟怎么使用？

近年来，电商平台的兴起让很多人纷纷加入进来，希望通过在网上销售产品来赚取更多的利润。在这个竞争激烈的市场中，如何找到稳定的渠道来推广自己的产品成为了每个卖家的追求。抖店精选联盟是一个不错的选择，可以帮助卖家快速提升销量。1.如何使用抖店精选联盟？1.注册成为联盟会员首先，您需要在抖店精选联盟官网注册。注册过程比较简单，

Azure Kubernetes Service中重写规则踩坑小记录

前言最近在做标准产品在不同云平台中的部署验证，有幸体验了一下微软的Azure。负责采购的运维部门这次采用了ApplicationGateway来搭配AKS(AzureKubernetesService)对外暴露服务，正好借着这个机会来体验一下ApplicationGateway。应用场景域名api.demo.com指向

探索科技地图：通向未来的科技之路

科技地图是一张连接现实与未来的路线图，它标示着创新的方向和科技的潜力。在这个信息爆炸的时代，我们深陷于新技术和新理念的海洋中，科技地图为我们提供了一颗指南针，帮助我们更好地了解和探索科技的前沿。科技地图的起源：科技的演化之路科技地图并非一夜之间出现，它承载着几十年科技发展的积淀。从最早的计算机革命，到移动互联网的崛起，

深入理解Linux网络笔记（一）：内核是如何接收网络包的

本文为《深入理解Linux网络》学习笔记，使用的Linux源码版本是3.10，网卡驱动是Intel的igb网卡驱动Linux源码在线阅读：https://elixir.bootlin.com/linux/v3.10/source1、内核是如何接收网络包的1）、Linux网络收包总览在TCP/IP网络分层模型里，整个协议

vue3学习源码笔记（小白入门系列）------ 重点！响应式原理 代码逐行分析

目录备注响应式数据创建ref和reactive核心作用第一轮的依赖收集发生时机setup阶段去更改了响应式数据会发生依赖收集吗派发更新派发更新是什么时候触发的？扩展：setup阶段响应式数据被修改会触发组件更新吗vue是如何根据派发更新来触发组件的更新渲染的？组件副作用函数执行时有多个响应式数据更新是如何保证组件只会触

一个手机ip从这个城市去到另一个城市多久会变

随着现代社会的互联网和移动通信的普及，手机IP地址的变化成为了一个备受关注的话题。当我们从一个城市移动到另一个城市时，我们可能会好奇手机IP地址会在多长时间内发生变化。下面虎观代理小二二将详细介绍一下。手机IP地址会随着其所连接的网络的变化而发生改变。当您从一个城市移动到另一个城市，手机可能会重新连接到新的基站或使用不

基于YOLOv5开发构建农林作物害虫检测识别分析系统

智慧农业现在在很多试点区域已经推广开来了，这个借助各种助力政策的利好对于农业的发展是不错的机会，比如：激光自动除草、自动灭虫等等，结合AI的检测识别技术整合相关的硬件设备，比如：无人机、机械、喷淋等等可以实现大农田块的自动化工作，还是有蛮不错的前景的。这里本文的主要目的就是想要收集构建农林作物中常见的害虫数据来开发构建

淘天集团联合爱橙科技开源大模型训练框架Megatron-LLaMA

9月12日，淘天集团联合爱橙科技正式对外开源大模型训练框架——Megatron-LLaMA，旨在让技术开发者们能够更方便地提升大语言模型训练性能，降低训练成本，并保持和LLaMA社区的兼容性。测试显示，在32卡训练上，相比HuggingFace上直接获得的代码版本，Megatron-LLaMA能够取得176%的加速；在

QUIC协议报文解析(三)

在前面的两篇文字里我们简单介绍了QUIC的发展历史，优点以及QUIC协议的连接原理。本篇文章将会以具体的QUIC报文为例，详细介绍QUIC报文的结构以及各个字段的含义。早期QUIC版本众多，主要有谷歌家的gQUIC，以及IETF致力于将QUIC标准化，即IETFQUIC（iQUIC），还有Facebook家的mvfst

热文推荐
  1. Java的Socket通信的断网重连的正确写法

    Java的Socket通信的断网重连的正确写法Socket通信的断网重连介绍客户端与服务端源码演示截图本地演示服务器演示演示截图总结Socket通信的断网重连介绍针对于已经建立通信的客户端与服务器，当客户端与服务器因为网络问题导致网络不通而断开连接了或者由于服务器端的服务被突然停掉，而客户端进行的一种尝试重新建立连接的

  2. 通用商城项目（下）

    记录一些踩坑的地方，以及理顺一些思路。通过管理系统页面，完成商品属性分组和商品属性（基本属性）关联维护属性表与属性组表的功能完善：显示属性组与属性表的一对多关系前端1.引入组件，是否显示使用v-if，但是还要注意引入的组件本身，是否自己也有:visible.sync="visible"这样的属性。只有当两层是否显示的变

  3. 通过内网穿透，在Windows 10系统下搭建个人《我的世界》服务器公网联机

    文章目录1.Java环境搭建2.安装我的世界Minecraft服务3.启动我的世界服务4.局域网测试连接我的世界服务器5.安装cpolar内网穿透6.创建隧道映射内网端口7.测试公网远程联机8.配置固定TCP端口地址8.1保留一个固定tcp地址8.2配置固定tcp地址9.使用固定公网地址远程联机今天和大家分享一下只需简

  4. 【外汇天眼】外汇交易的优势：公平、低成本和高流动性

    外汇交易的优势体现在其公平性以及众多其他方面。让我们一起重新审视这些优势，以更清晰地了解外汇市场的吸引力。1、低成本交易：与其他金融市场不同，外汇市场没有佣金、清算费、交易所费、政府费或经纪费。大多数外汇经纪人通过点差服务获得回报。这意味着交易者可以更高效地管理交易成本。2、无固定手数：与期货市场不同，外汇市场允许交易

  5. 【2591. 将钱分给最多的儿童】

    来源：力扣（LeetCode）描述：给你一个整数money，表示你总共有的钱数（单位为美元）和另一个整数children，表示你要将钱分配给多少个儿童。你需要按照如下规则分配：所有的钱都必须被分配。每个儿童至少获得1美元。没有人获得4美元。请你按照上述规则分配金钱，并返回最多有多少个儿童获得恰好8美元。如果没有任何分配

  6. 【Vue】利用vue.js、vuex和vue router组件、element ui plus组件来创建基于知识图谱的智能问答系统的前端部分

    Vue.js是一个流行的JavaScript框架，用于构建用户界面。它基于MVVM模式，可以轻松地创建组件化应用程序。Vuex是Vue.js的官方状态管理库，用于管理Vue.js应用程序中的数据流。它提供了一种集中式的方式来管理应用程序中的所有组件的状态，并且它可以让你轻松地实现可预测的状态变化。VueRouter是V

  7. PostgreSQL serial类型

    serial类型和序列postgresql序列号（SERIAL）类型包括smallserial（smallint,short）,serial(int)bigserial(bigint,longlongint)不管是smallserial,serial还是bigserial，其范围都是(1,922337203685477

  8. Python实现简单的爬虫功能

    目录一、导入必要的库和模块二、发送HTTP请求三、解析HTML文件四、存储数据五、完整代码示例六、注意事项总结随着互联网的普及，信息获取的需求越来越大，而爬虫技术则成为了一种常见的信息获取方式。在Python中，有许多库和模块可以用于实现简单的爬虫功能。本文将介绍如何使用Python实现简单的爬虫功能，包括导入必要的库

  9. std::thread简单使用

    std::thread是C++标准库中用于多线程编程的类。它允许你创建和管理线程，使程序能够并发执行不同的任务。以下是关于std::thread的详细介绍以及几个示例说明：创建线程你可以使用std::thread构造函数创建新的线程，并将要执行的函数传递给它。以下是创建线程的基本示例：#include<iostream