策略模式

摘自《JavaScript设计模式与开发实践》

在现实中，很多时候有多种途径到达同一个目的地。比如我们要去某个地方旅游，可以根据具体的实际情况来选择出行的线路。

• 如果没有时间但是不在乎钱，可以选择坐飞机。
• 如果没有钱，可以选择坐大巴或者火车。
• 如果再穷一点，可以选择骑自行车。

在程序设计中，我们也常常遇到类似的情况，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择 zip算法，也可以选择 gzip算法。这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

使用策略模式计算奖金

很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S的人年终奖有 4倍工资，绩效为 A的人年终奖有 3倍工资，而绩效为 B的人年终奖是 2倍工资。假设财务部要求我们提供一段代码，来方便他们计算员工的年终奖。

初版

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) // 400000

可以发现，这段代码十分简单，但是存在着显而易见的缺点。

• calculateBonus 函数比较庞大，包含了很多 if-else 语句，这些语句需要覆盖所有的逻辑分支。
• calculateBonus 函数缺乏弹性，如果增加了一种新的绩效等级 C，或者想把绩效 S 的奖金系数改为 5，那我们必须深入calculateBonus 函数的内部实现，这是违反开放 - 封闭原则的。
• 算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择只有复制和粘贴。

使用组合函数重构代码

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

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 函数有可能越来越庞大，而且在系统变化的时候缺乏弹性。

使用策略模式重构代码

经过思考，我们想到了更好的办法——使用策略模式来重构代码。策略模式指的是定义一系列的算法，把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。

在这个例子里，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则。

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
  }
  // 接下来定义奖金类 Bonus ：
  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) // 把计算奖金的操作委托给对应的策略对象
  }

这句话如果说得更详细一点，就是：定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对 Context发起请求的时候，Context总是把请求委托给这些策略对象中间的某一个进行计算。

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

  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 版本的策略模式

我们让 strategy 对象从各个策略类中创建而来，这是模拟一些传统面向对象语言的实现。实际上在 JavaScript 语言中，函数也是对象，所以更简单和直接的做法是把 strategy直接定义为函数：

const strategies = {
    "S": function (salary) {
      return salary * 4
    },
    "A": function (salary) {
      return salary * 3
    },
    "B": function (salary) {
      return salary * 2
    }
}

同样，Context 也没有必要必须用 Bonus 类来表示，我们依然用 calculateBonus 函数充当Context来接受用户的请求。经过改造，代码的结构变得更加简洁：

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)) // 输出：80000
  console.log(calculateBonus('A', 10000)) // 输出：30000

使用策略模式进行表单校验

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

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

初版

现在编写表单校验的第一个版本，可以提前透露的是，目前我们还没有引入策略模式。代码如下：

<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
  请输入用户名：<input type="text" name="userName">
  请输入密码：<input type="text" name="password">
  请输入手机号码：<input type="text" name="phoneNumber">
  <button>提交</button>
</form>
</body>
<script>
  const 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
    }
  }
</script>

这是一种很常见的代码编写方式，它的缺点跟计算奖金的最初版本一模一样。

• registerForm.onsubmit 函数比较庞大，包含了很多 if-else 语句，这些语句需要覆盖所有的校验规则。
• registerForm.onsubmit 函数缺乏弹性，如果增加了一种新的校验规则，或者想把密码的长度校验从 6改成 8，我们都必须深入registerForm.onsubmit 函数的内部实现，这是违反开放 - 封闭原则的。
• 算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，那我们很可能将这些校验逻辑复制得漫天遍野。

用策略模式重构表单校验

下面我们将用策略模式来重构表单校验的代码，很显然第一步我们要把这些校验逻辑都封装成策略对象：

const 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
      }
    }

接下来我们准备实现 Validator 类。 Validator 类在这里作为 Context，负责接收用户的请求并委托给 strategy 对象。在给出 Validator 类的代码之前，有必要提前了解用户是如何向 Validator类发送请求的，这有助于我们知道如何去编写 Validator 类的代码。代码如下：

const validataFunc = function () {
    const validator = new Validator() // 创建一个 validator 对象
    /***************添加一些校验规则****************/
    validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空')
    validator.add(registerForm.password, 'minLength:6', '密码长度不能少于 6 位')
    validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确')
    const errorMsg = validator.start() // 获得校验结果
    return errorMsg // 返回校验结果
  }
  const registerForm = document.getElementById('registerForm')
  registerForm.onsubmit = function () {
    const errorMsg = validataFunc() // 如果 errorMsg 有确切的返回值，说明未通过校验
    if (errorMsg) {
      alert(errorMsg)
      return false // 阻止表单提交
    }
  }

从这段代码中可以看到，我们先创建了一个 validator 对象，然后通过 validator.add 方法，往 validator 对象中添加一些校验规则。 validator.add 方法接受 3个参数，以下面这句代码说明：

validator.add( registerForm.password, 'minLength:6', '密码长度不能少于 6 位' )

• registerForm.password 为参与校验的 input 输入框。
• 'minLength:6' 是一个以冒号隔开的字符串。冒号前面的 minLength 代表客户挑选的 strategy 对象，冒号后面的数字 6表示在校验过程中所必需的一些参数。 'minLength:6' 的意思就是校验 registerForm.password 这个文本输入框的 value 最小长度为 6。如果这个字符串中不包含冒号，说明校验过程中不需要额外的参数信息，比如 'isNonEmpty' 。
• 第 3个参数是当校验未通过时返回的错误信息。

当我们往 validator 对象里添加完一系列的校验规则之后，会调用 validator.start() 方法来启动校验。如果 validator.start() 返回了一个确切的 errorMsg 字符串当作返回值，说明该次校验没有通过，此时需让 registerForm.onsubmit 方法返回 false 来阻止表单的提交。

const Validator = function () {
    this.cache = [] // 保存校验规则
  }
  Validator.prototype.add = function (dom, rule, errorMsg) {
    const ary = rule.split(':') // 把 strategy 和参数分开
    this.cache.push(function () { // 把校验的步骤用空函数包装起来，并且放入 cache
      const strategy = ary.shift() // 用户挑选的 strategy
      ary.unshift(dom.value) // 把 input 的 value 添加进参数列表
      ary.push(errorMsg) // 把 errorMsg 添加进参数列表
      return strategies[strategy].apply(dom, ary)
    })
  }
  Validator.prototype.start = function () {
    for (let i = 0, validatorFunc; validatorFunc = this.cache[i]; i++) {
      const msg = validatorFunc() // 开始校验，并取得校验后的返回信息
      if (msg) { // 如果有确切的返回值，说明校验没有通过
        return msg
      }
    }
  }
  registerForm.onsubmit = function () {
    const validator = new Validator()
    validator.add(registerForm.userName, 'minLength:10', '用户名长度不能小于 10 位')
    // 如果 errorMsg 有确切的返回值，说明未通过校验
    let errorMsg = validator.start()
    if (errorMsg) {
      alert(errorMsg)
    }
    return false // 阻止表单提交
  }

使用策略模式重构代码之后，我们仅仅通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方。

在修改某个校验规则的时候，只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于 4个字符。可以看到，这时候的修改是毫不费力的。代码如下：

validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' )
// 改成：
validator.add( registerForm.userName, 'minLength:10', '用户名长度不能小于 10 位' )