策略模式 | 流年石刻

好的，我们来深入探讨一下前端开发中的策略模式。

我会从它是什么、为什么需要它、以及如何在实际工作中运用它这几个方面，结合具体的代码示例来阐述我的理解。

核心理解：将“做什么”与“怎么做”分离开

想象一个场景：你在一个电商网站结算，可以选择多种支付方式：支付宝、微信支付、信用卡支付。

“做什么”：是固定的，就是“发起支付”。
“怎么做”：是变化的，用支付宝、用微信、还是用信用卡，每种方式的实现细节都完全不同。

策略模式的核心思想就是，把这些变化的“怎么做”（具体的算法或行为），从“做什么”（执行这个行为的上下文）中抽离出来，把每一个“怎么做”都封装成一个独立的、可以相互替换的“策略”。

最终，执行者（Context）不需要关心内部具体是如何实现的，只需要在需要的时候，告诉它使用哪个“策略”即可。

为什么要用策略模式？告别庞大的 `if-else` / `switch`

在没有使用策略模式之前，我们可能会写出这样的代码来实现支付功能：

JavaScript

function processPayment(type, amount) {
  if (type === 'alipay') {
    // 调用支付宝的 SDK，处理参数，跳转...
    console.log(`使用支付宝支付 ${amount} 元`);
  } else if (type === 'wechat') {
    // 生成微信支付二维码，轮询支付状态...
    console.log(`使用微信支付 ${amount} 元`);
  } else if (type === 'creditcard') {
    // 连接银行网关，加密卡号信息...
    console.log(`使用信用卡支付 ${amount} 元`);
  } else {
    // 默认或错误处理
    console.log('不支持的支付方式');
  }
}

processPayment('alipay', 100);

这段代码有几个显而易见的问题：

违反开放/封闭原则：如果未来要增加一种新的支付方式，比如“数字货币支付”，你必须修改 processPayment 函数的内部逻辑，增加一个 else if 分支。这使得函数越来越臃肿，难以维护。
职责耦合：processPayment 函数承担了太多的职责。它既要知道“发起支付”这个行为，又要知道所有支付方式的具体实现细节。
复用性差：如果另一个业务场景也需要用到支付宝支付的逻辑，你可能需要复制代码，或者将这个巨大的函数到处引用。

策略模式正是为了解决这些问题而生的。

如何在前端中应用策略模式？以表单验证为例

表单验证是前端最常见的场景之一，也是策略模式的绝佳应用场景。一个输入框可能有多种验证规则，比如“不能为空”、“必须是手机号”、“长度不能少于8位”等等。

第1步：定义一组策略（Strategies）

我们将每一种验证规则都封装成一个独立的函数。这些函数遵循同样的接口约定（例如，都接收 value 和 errorMsg 两个参数，返回错误信息或者 undefined）。

JavaScript

// 策略对象，用于存放所有验证规则
const strategies = {
  isNonEmpty: function(value, errorMsg) {
    if (value === '' || value === undefined || value === null) {
      return errorMsg;
    }
  },
  minLength: function(value, length, errorMsg) {
    if (value.length < length) {
      return errorMsg;
    }
  },
  isMobile: function(value, errorMsg) {
    // 一个简单的手机号正则
    if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  }
};

这里的 strategies 对象就是我们的策略库。每一个键值对都是一个独立的策略。

第2步：创建上下文（Context）

上下文是使用这些策略的“执行者”。在表单验证的例子中，我们可以创建一个 Validator 类来扮演这个角色。它负责接收和管理需要执行的验证规则，并最终执行它们。

JavaScript

class Validator {
  constructor() {
    this.cache = []; // 用于存储要执行的验证规则
  }

  // 添加规则
  add(dom, rules) {
    for (let rule of rules) {
      // 分离策略名称和参数
      let strategyArr = rule.strategy.split(':');
      let errorMsg = rule.errorMsg;

      this.cache.push(() => {
        let strategy = strategyArr[0]; // e.g., 'minLength'
        strategyArr.shift(); // 移除策略名，剩下参数
        let args = [dom.value, ...strategyArr, errorMsg]; // 组合参数
        
        // 调用策略函数
        return strategies[strategy].apply(dom, args);
      });
    }
  }

  // 开始验证
  start() {
    for (let validatorFunc of this.cache) {
      const errorMsg = validatorFunc(); // 执行验证函数
      if (errorMsg) {
        return errorMsg; // 如果有错误信息，立即返回
      }
    }
  }
}

这个 Validator 类就是我们的上下文。 它内部并不包含任何具体的验证逻辑。它只做三件事：

提供 add 方法，让外部告诉它要对哪个输入框（dom）使用哪些策略（rules）。
将这些待执行的策略（封装成函数）存放在 cache 数组里。
提供 start 方法，遍历 cache，依次调用策略，并返回结果。

第3步：客户端调用

现在，我们可以非常灵活地使用它了。

HTML

<form id="myForm">
  用户名: <input type="text" name="username">
  密码: <input type="password" name="password">
  手机号: <input type="text" name="mobile">
  <button type="submit">提交</button>
</form>

JavaScript

// 客户端代码
const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  const validator = new Validator();

  // 为 username 添加验证规则
  validator.add(myForm.username, [
    { strategy: 'isNonEmpty', errorMsg: '用户名不能为空' },
    { strategy: 'minLength:6', errorMsg: '用户名长度不能小于6位' }
  ]);
  
  // 为 password 添加验证规则
  validator.add(myForm.password, [
    { strategy: 'isNonEmpty', errorMsg: '密码不能为空' }
  ]);

  // 为 mobile 添加验证规则
  validator.add(myForm.mobile, [
    { strategy: 'isMobile', errorMsg: '请输入正确的手机号码' }
  ]);

  const errorMsg = validator.start(); // 开始验证

  if (errorMsg) {
    alert(errorMsg); // 显示第一个错误信息
    return;
  }

  alert('验证通过，提交表单');
  // ... 接下来可以执行 ajax 提交等操作
});

策略模式的优势总结

高度解耦，易于维护：验证逻辑（策略）和业务逻辑（上下文）完全分离。你可以随意修改、增加、删除任何一个验证规则，而完全不需要动 Validator 类的代码。这完美符合开放/封闭原则。
策略复用：isNonEmpty、isMobile 这些策略都是纯函数，可以在项目的任何地方被复用，甚至可以打包成一个独立的工具库。
可测试性强：每个策略都是一个独立的小单元，非常容易进行单元测试。
代码更清晰：避免了冗长的 if-else 结构，让代码的意图更加明显和优雅。

我的看法与最佳选择

策略模式并非银弹，它通过增加一些结构来换取灵活性和可维护性。

对于简单场景：如果你的逻辑只有两种固定的情况，比如 if (isVip) { ... } else { ... }，那么直接使用 if-else 反而更简单直接，强行使用策略模式会显得过度设计。
对于复杂、多变、可扩展的场景：当你有3个或更多个可选的行为，并且这些行为未来还可能增加或改变时，策略模式就是你的最佳选择。前端的表单验证、动画效果选择、数据上报方式、不同主题的渲染逻辑等，都非常适合使用策略模式来构建。

总而言之，策略模式是一种管理和组织“算法”的模式。它将易变的部分（具体怎么做）封装起来，使其与不变的部分（什么时候做）隔离，从而让整个系统更加灵活、健壮，也更容易应对未来的变化。在现代前端工程化开发中，它是一种非常实用且重要的设计思想。

// 策略对象，用于存放所有验证规则 const strategies = { isNonEmpty: function(value, errorMsg) { if (value === '' || value === undefined || value === null) { return errorMsg; } }, minLength: function(value, length, errorMsg) { if (value.length < length) { return errorMsg; } }, isMobile: function(value, errorMsg) { // 一个简单的手机号正则 if (!/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(value)) { return errorMsg; } } };

class Validator { constructor() { this.cache = []; // 用于存储要执行的验证规则 } // 添加规则 add(dom, rules) { for (let rule of rules) { // 分离策略名称和参数 let strategyArr = rule.strategy.split(':'); let errorMsg = rule.errorMsg; this.cache.push(() => { let strategy = strategyArr[0]; // e.g., 'minLength' strategyArr.shift(); // 移除策略名，剩下参数 let args = [dom.value, ...strategyArr, errorMsg]; // 组合参数 // 调用策略函数 return strategies[strategy].apply(dom, args); }); } } // 开始验证 start() { for (let validatorFunc of this.cache) { const errorMsg = validatorFunc(); // 执行验证函数 if (errorMsg) { return errorMsg; // 如果有错误信息，立即返回 } } } }

<form id="myForm"> 用户名: <input type="text" name="username"> 密码: <input type="password" name="password"> 手机号: <input type="text" name="mobile"> <button type="submit">提交</button> </form>

// 客户端代码 const myForm = document.getElementById('myForm'); myForm.addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 const validator = new Validator(); // 为 username 添加验证规则 validator.add(myForm.username, [ { strategy: 'isNonEmpty', errorMsg: '用户名不能为空' }, { strategy: 'minLength:6', errorMsg: '用户名长度不能小于6位' } ]); // 为 password 添加验证规则 validator.add(myForm.password, [ { strategy: 'isNonEmpty', errorMsg: '密码不能为空' } ]); // 为 mobile 添加验证规则 validator.add(myForm.mobile, [ { strategy: 'isMobile', errorMsg: '请输入正确的手机号码' } ]); const errorMsg = validator.start(); // 开始验证 if (errorMsg) { alert(errorMsg); // 显示第一个错误信息 return; } alert('验证通过，提交表单'); // ... 接下来可以执行 ajax 提交等操作 });