俗话说，条条大路通罗马。在美剧《越狱》中，主角就设计了两条越狱的道路。这两条道路都可以达到靠近都可以达到靠近煎鱼外墙的医务室。

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

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

再有一个例子，你去饭店吃饭，你点了西红柿炒番茄，你结账的时候会有如下选择，如下图所示：

在程序设计中，我们也通常遇到类似的情况，要实现，讴歌功能有多重方案可以选择。比如，一个压缩文件文件的程序，既可以选择 zip 算法，也可以选择 gzip 算法。

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

使用策略模式计算奖金

策略模式有着广泛的应用。本节我们就以年终奖的计算为例进行介绍。

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

最初的代码实现

我们可以编写一个名为 calculateBonus 的函数来计算每个人的奖金数额。很显然， calculateBonus 函数要正确工作，就需要接收两个参数：员工的工资数额和他的绩效考核等级。 代码如下：

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. calculateBonus 函数比较庞大，包含了很多 if-else 语句，这些语句需要覆盖所有的逻辑 分支。
2. calculateBonus 函数缺乏弹性，如果增加了一种新的绩效等级 C，或者想把绩效 S 的奖金 系数改为 5，那我们必须深入 calculateBonus 函数的内部实现，这是违反开放  封闭原则的。
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

目前，我们的程序得到了一定的改善，但这种改善非常有限，我们依然没有解决最重要的问题：calculateBonus 函数有可能越来越庞大，而且在系统变化的时候缺乏弹性。

使用策略模式重构代码

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

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

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类 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;
};

// 接下来定义奖金类 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 实现的策略模式。

JavaScript 版本的策略模式

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

cosnt 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

在接下来的缓动动画和表单验证的例子中，我们用到的都是这种函数形式的策略对象。

表单校验

在一个 Web 项目中，注册、登录、修改用户信息等功能的实现都离不开提交表单。

在将用户输入的数据交给后台之前，常常要做一些客户端力所能及的校验工作，比如注册的时候需要校验是否填写了用户名，密码的长度是否符合规定，等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。

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

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

表单校验的第一个版本

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

<html>
  <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>
    <script>
      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;
        }
      };
    </script>
  </body>
</html>

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

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

用策略模式重构表单校验

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

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 位' );

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

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

最后是 Validator 类的实现：

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++]); ) {
    const msg = validatorFunc(); // 开始校验，并取得校验后的返回信息
    if (msg) {
      // 如果有确切的返回值，说明校验没有通过
      return msg;
    }
  }
};

使用策略模式重构代码之后，我们仅仅通过“配置”的方式就可以完成一个表单的校验，这些校验规则也可以复用在程序的任何地方，还能作为插件的形式，方便地被移植到其他项目中。

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

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

给某个文本输入框添加多种校验规则

为了让读者把注意力放在策略模式的使用上，目前我们的表单校验实现留有一点小遗憾：一个文本输入框只能对应一种校验规则，比如，用户名输入框只能校验输入是否为空：

validator.add(registerForm.userName, "isNonEmpty", "用户名不能为空");

如果我们既想校验它是否为空，又想校验它输入文本的长度不小于 10 呢？我们期望以这样的形式进行校验：

validator.add(registerForm.userName, [
  {
    strategy: "isNonEmpty",
    errorMsg: "用户名不能为空",
  },
  {
    strategy: "minLength:6",
    errorMsg: "用户名长度不能小于 10 位",
  },
]);

下面提供的代码可用于一个文本输入框对应多种校验规则：

<html>
  <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>
    <script>
      /***********************策略对象**************************/
      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;
          }
        },
      };
      /***********************Validator 类**************************/
      var Validator = function () {
        this.cache = [];
      };
      Validator.prototype.add = function (dom, rules) {
        var self = this;
        for (var i = 0, rule; (rule = rules[i++]); ) {
          (function (rule) {
            var strategyAry = rule.strategy.split(":");
            var errorMsg = rule.errorMsg;
            self.cache.push(function () {
              var strategy = strategyAry.shift();
              strategyAry.unshift(dom.value);
              strategyAry.push(errorMsg);
              return strategies[strategy].apply(dom, strategyAry);
            });
          })(rule);
        }
      };
      Validator.prototype.start = function () {
        for (var i = 0, validatorFunc; (validatorFunc = this.cache[i++]); ) {
          var errorMsg = validatorFunc();
          if (errorMsg) {
            return errorMsg;
          }
        }
      };
      /***********************客户调用代码**************************/
      var registerForm = document.getElementById("registerForm");
      var validataFunc = function () {
        var validator = new Validator();
        validator.add(registerForm.userName, [
          {
            strategy: "isNonEmpty",
            errorMsg: "用户名不能为空",
          },
          {
            strategy: "minLength:6",
            errorMsg: "用户名长度不能小于 10 位",
          },
        ]);
        validator.add(registerForm.password, [
          {
            strategy: "minLength:6",
            errorMsg: "密码长度不能小于 6 位",
          },
        ]);
        validator.add(registerForm.phoneNumber, [
          {
            strategy: "isMobile",
            errorMsg: "手机号码格式不正确",
          },
        ]);
        var errorMsg = validator.start();
        return errorMsg;
      };
      registerForm.onsubmit = function () {
        var errorMsg = validataFunc();
        if (errorMsg) {
          alert(errorMsg);
          return false;
        }
      };
    </script>
  </body>
</html>

在 React 项目中使用策略模式

在我们的项目中有这样的一个需求，就是根据传入的值现实不同的组件，最差的方式就是使用 if 或者 switch 判断，根据不同的条件判断返回不同的组件，那么这种方式，如果判断的条数多起来，整个项目的代码是很丑的，那么这个时候我们就可以使用策略模式的方式来实现这一需求，首先我们定义一个对象：

import File from "./file";
import Search from "./search";
import Setting from "./setting";
import Port from "./port";

export const components = {
  search: Search,
  setting: Setting,
  port: Port,
  file: File,
};

在上述代码中，通过 import 导入的变量都是一个个组件或者页面，最终存储在 components 变量里。这个时候我们就可以在使用到的组件中导入这个变量并使用：

import { components } from "./component";

const Edit: FC = () => {
  const [activeIcon, setActiveIcon] = useState<labelType>("file");

  const Component = components[activeIcon];

  return <Component />;
};

通过这种方式，我们就实现了一个根据不同的类型的案例了，从而优化了业务代码的简洁些，如果后期有需要增加或者删除的，直接从前面的变量中删除即可。

策略模式的优缺点

策略模式是一种常用且有效的设计模式，本章提供了计算奖金、缓动动画、表单校验这三个例子来加深大家对策略模式的理解。从这三个例子中，我们可以总结出策略模式的一些优点。

1. 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。
2. 策略模式提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展。
3. 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作。
4. 在策略模式中利用组合和委托来让 Context 拥有执行算法的能力，这也是继承的一种更轻便的替代方案。

当然，策略模式也有一些缺点，但这些缺点并不严重。

首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在 Context 中要好。

其次，要使用策略模式，必须了解所有的 strategy，必须了解各个 strategy 之间的不同点，这样才能选择一个合适的 strategy。比如，我们要选择一种合适的旅游出行路线，必须先了解选择飞机、火车、自行车等方案的细节。此时 strategy 要向客户暴露它的所有实现，这是违反最少知识原则的。

参考文献

• 书籍：JavaScript 设计模式与开发实践