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. 环境类ContextContext接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明 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属性,比如lefttopbackground-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; // 阻止表单提交
  }
};

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值