谈谈策略模式,策略模式的适用场景是什么?

一、什么是策略模式?​​

策略模式(Strategy Pattern)属于​​行为型设计模式​ ​。核心思路是将一组​​可替换的算法​​封装在独立的类中,使它们可以在运行时动态切换,同时使客户端代码与具体算法解耦。它包含三个核心角色:

  1. ​策略接口(Strategy Interface)​:定义算法的方法签名
  2. ​具体策略(Concrete Strategies)​:实现具体算法逻辑
  3. ​上下文(Context)​:持有一个策略对象,并调用其方法

​​通俗比喻​​:把算法当作「插件」,客户端只需要选择对应插件插入到主流程中,不需要关注插件内部实现。


​​二、适用场景​​

以下场景常见于前端开发:

  1. ​同类功能的多算法切换​
    👉 表单验证(邮箱、手机号、身份证等校验规则)、数据导出(CSV、Excel、PDF格式)、图表渲染(折线图、柱状图)
  2. ​需要动态选择行为的场景​
    👉 动态折扣计算(满减、折扣券、积分抵扣)、权限校验(不同角色对应不同校验规则)
  3. ​消除臃肿的条件分支​
    👉 存在大量 if-else 或 switch-case 的场景(如老代码中的支付方式处理)
  4. ​需要隐藏复杂算法的实现​
    👉 地图路径规划(步行、驾车、公交策略)、动画缓动函数(linear、ease-in)

​​三、实战代码示例​​
​​案例1:表单验证策略​​
javascript 复制代码
// 策略接口:定义 validate 方法
class ValidationStrategy {
  validate(value) {
    throw new Error("必须实现 validate 方法!");
  }
}

// 具体策略:非空校验
class RequiredValidation extends ValidationStrategy {
  validate(value) {
    return value.trim() !== "";
  }
}

// 具体策略:手机号校验
class MobileValidation extends ValidationStrategy {
  validate(value) {
    return /^1[3-9]\d{9}$/.test(value);
  }
}

// 上下文类:管理当前策略
class ValidatorContext {
  constructor(strategy) {
    this.strategy = strategy;
  }

  setStrategy(strategy) {
    this.strategy = strategy;
  }

  execute(value) {
    return this.strategy.validate(value);
  }
}

// 使用示例
const validator = new ValidatorContext(new RequiredValidation());
console.log(validator.execute("")); // 输出 false

validator.setStrategy(new MobileValidation());
console.log(validator.execute("13800138000")); // 输出 true

​​代码亮点​​:

  • 添加新校验规则只需新增策略类,无须修改 ValidatorContext
  • 客户端通过 .setStrategy() 动态切换算法

​​案例2:动态数据导出(常用功能增强)​​
javascript 复制代码
// 策略接口:导出方法
class ExportStrategy {
  export(data) {
    throw new Error("必须实现 export 方法");
  }
}

// 具体策略-导出为 CSV
class CsvExport extends ExportStrategy {
  export(data) {
    const csvContent = data.map(row => row.join(",")).join("\n");
    console.log(`导出 CSV 成功,内容:${csvContent}`);
  }
}

// 具体策略-导出为 Excel(伪代码)
class ExcelExport extends ExportStrategy {
  export(data) {
    // 假装调用了 Excel 库
    console.log("生成 Excel 文件并下载");
  }
}

// 上下文(可与 UI 结合)
class Exporter {
  constructor() {
    this.strategy = new CsvExport(); // 默认策略
  }

  setFormat(format) {
    if (format === 'csv') {
      this.strategy = new CsvExport();
    } else if (format === 'excel') {
      this.strategy = new ExcelExport();
    }
  }

  executeExport(data) {
    this.strategy.export(data);
  }
}

// 使用示例
const exporter = new Exporter();
exporter.setFormat('excel');
exporter.executeExport([['Name', 'Age'], ['John', 30]]);

​​应用场景​ ​:

不同导出格式的代码集中到策略类中,避免主模块代码混乱。


​​四、开发建议与避坑指南​​
​​推荐做法​​:
  1. ​组合优于继承​ :
    用策略对象组合到上下文类,而非通过继承实现多态

  2. ​接口约束​ :TypeScript 更优

    javascript 复制代码
    interface Strategy {
      execute(data: any): void;
    }
  3. ​策略命名清晰​ :
    用 MobileValidationStrategy 而非 Strategy1,便于维护

  4. ​无状态策略​ :
    尽量将策略设计为无状态(纯函数),可通过单例复用

​​常见陷阱​​:
  1. ​过度设计​ :
    👉 若只有1~2种固定算法,直接 if-else 更简单
  2. ​客户端感知策略细节​ :
    👉 违反迪米特法则,应当由上下文类处理策略选择
  3. ​策略间参数不一致​ :
    👉 校验策略统一接收字符串,而非有的需要 value,有的需要 formData
  4. ​性能损耗​ :
    👉 频繁创建策略对象时,可考虑对象池缓存
​

策略模式是应对​​算法多样化​ ​和​​动态切换需求​​的强大工具,前端开发中使用频率较高。

正确使用可显著提升代码可维护性,但在简单场景下需权衡是否引入复杂度。关键在于​​识别行为的变化点​​,将其独立出来。

相关推荐
架构技术专栏4 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海5 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝6 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财6 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起0077 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
_馒头7 小时前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js
用户11481867894847 小时前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界7 小时前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github
葡萄城技术团队7 小时前
dsh-spreadjs-editor 当前支持什么:安装前需要了解的几件事
前端
三*一8 小时前
优化修整算法
前端·javascript·算法