JS如何实现策略模式-js教程-PHP中文网

JS如何实现策略模式

畫卷琴夢

发布： 2025-08-19 13:36:02

原创

216人浏览过

策略模式通过封装算法使其可互换，JavaScript中利用函数作为一等公民实现，适用于表单验证等场景，结合工厂模式提升灵活性，但应避免过度设计。

js如何实现策略模式

策略模式的核心在于定义一系列算法，并将每一个算法封装起来，使它们可以相互替换。这使得算法可以在不影响客户端的情况下发生变化。在JS中，这可以通过函数作为一等公民的特性来实现。

解决方案

定义策略接口（可选）： 虽然JS是动态类型语言，策略接口不是强制的，但为了代码的可读性和可维护性，可以考虑使用注释或TypeScript来定义策略接口。
创建具体策略类/函数： 每个策略代表一个具体的算法。在JS中，可以直接使用函数来表示策略。
创建上下文类： 上下文类持有策略的引用，并负责在运行时选择并执行策略。

下面是一个简单的例子：

// 策略对象
const strategies = {
  "strategyA": function(data) {
    return data + " using strategy A";
  },
  "strategyB": function(data) {
    return data + " using strategy B";
  },
  "strategyC": function(data) {
    return data + " using strategy C";
  }
};

// 上下文对象
const Context = function(strategy) {
  this.strategy = strategy;
  this.executeStrategy = function(data) {
    return this.strategy(data);
  };
};

// 使用策略
const contextA = new Context(strategies.strategyA);
console.log(contextA.executeStrategy("Data")); // 输出: Data using strategy A

const contextB = new Context(strategies.strategyB);
console.log(contextB.executeStrategy("Data")); // 输出: Data using strategy B

// 动态切换策略
contextA.strategy = strategies.strategyC;
console.log(contextA.executeStrategy("Data")); // 输出: Data using strategy C

登录后复制

这个例子展示了如何使用一个

strategies

登录后复制

对象来存储不同的策略函数，然后

Context

登录后复制

对象根据传入的策略来执行相应的操作。关键点在于

contextA.strategy = strategies.strategyC;

登录后复制

这行代码，它展示了策略的动态切换能力。

策略模式在前端表单验证中的应用

表单验证是一个非常适合使用策略模式的场景。不同的表单字段可能需要不同的验证规则，比如邮箱格式、手机号码格式、密码强度等。

const validationStrategies = {
  isNotEmpty: function(value, errorMsg) {
    if (value === '') {
      return errorMsg;
    }
  },
  minLength: function(value, length, errorMsg) {
    if (value.length < length) {
      return errorMsg;
    }
  },
  isMobile: function(value, errorMsg) {
    if (!/^1[3456789]\d{9}$/.test(value)) {
      return errorMsg;
    }
  }
};

const validate = function(value, rules) {
  for (let i = 0, rule; rule = rules[i++];) {
    let strategy = rule.strategy;
    let errorMsg = rule.errorMsg;
    let args = rule.args || [];
    args.unshift(value);
    args.push(errorMsg);
    let error = validationStrategies[strategy].apply(null, args);
    if (error) {
      return error;
    }
  }
};

// 使用
const input = document.getElementById('input');
input.addEventListener('blur', function() {
  const error = validate(this.value, [
    { strategy: 'isNotEmpty', errorMsg: '不能为空' },
    { strategy: 'minLength', args: [6], errorMsg: '不能少于6位' }
  ]);
  if (error) {
    alert(error);
  }
});

登录后复制

这段代码展示了如何将不同的验证规则封装成策略，并根据需要组合使用。

validate

登录后复制

函数接收一个值和一组规则，然后依次执行这些规则。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

如何避免策略模式的过度设计？

策略模式虽然强大，但如果过度使用，会导致代码变得复杂和难以维护。如何避免过度设计呢？

只在必要时使用： 只有当算法确实需要动态切换或者存在多种变体时，才考虑使用策略模式。如果只是简单的条件判断，使用
```
if-else
```
登录后复制
或
```
switch
```
登录后复制
语句可能更简洁。
保持策略的简单性： 策略应该只关注算法本身，不要包含过多的业务逻辑。复杂的业务逻辑应该放在上下文类中。
考虑使用更简单的替代方案： 在某些情况下，可以使用简单的函数组合或高阶函数来代替策略模式。

例如，如果只需要根据不同的条件执行不同的函数，可以使用一个简单的对象来存储这些函数：

const actions = {
  "typeA": function() { console.log("Action A"); },
  "typeB": function() { console.log("Action B"); }
};

const type = "typeA";
if (actions[type]) {
  actions[type]();
}

登录后复制

这种方式比策略模式更简单，更适合简单的场景。

策略模式与工厂模式的结合使用

策略模式和工厂模式可以结合使用，以创建更加灵活和可扩展的系统。工厂模式可以用来创建策略对象，而策略模式则负责在运行时选择和执行策略。

// 策略工厂
const strategyFactory = {
  createStrategy: function(type) {
    switch (type) {
      case "A":
        return function(data) { return data + " using strategy A"; };
      case "B":
        return function(data) { return data + " using strategy B"; };
      default:
        return null;
    }
  }
};

// 上下文
const Context = function(strategyType) {
  this.strategy = strategyFactory.createStrategy(strategyType);
  this.executeStrategy = function(data) {
    if (this.strategy) {
      return this.strategy(data);
    } else {
      return "Strategy not found";
    }
  };
};

// 使用
const contextA = new Context("A");
console.log(contextA.executeStrategy("Data")); // 输出: Data using strategy A

const contextC = new Context("C");
console.log(contextC.executeStrategy("Data")); // 输出: Strategy not found

登录后复制

在这个例子中，