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

一、什么是策略模式?​

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

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

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


​二、适用场景​

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

  1. ​同类功能的多算法切换​
    👉 表单验证(邮箱、手机号、身份证等校验规则)、数据导出(CSV、Excel、PDF格式)、图表渲染(折线图、柱状图)
  2. ​需要动态选择行为的场景​
    👉 动态折扣计算(满减、折扣券、积分抵扣)、权限校验(不同角色对应不同校验规则)
  3. ​消除臃肿的条件分支​
    👉 存在大量 if-elseswitch-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. ​性能损耗​
    👉 频繁创建策略对象时,可考虑对象池缓存

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

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

相关推荐
独行soc6 分钟前
2025年常见渗透测试面试题-红队面试宝典下(题目+回答)
linux·运维·服务器·前端·面试·职场和发展·csrf
uhakadotcom22 分钟前
Google Earth Engine 机器学习入门:基础知识与实用示例详解
前端·javascript·面试
麓殇⊙37 分钟前
Vue--组件练习案例
前端·javascript·vue.js
outstanding木槿40 分钟前
React中 点击事件写法 的注意(this、箭头函数)
前端·javascript·react.js
会点php的前端小渣渣44 分钟前
vue的计算属性computed的原理和监听属性watch的原理(新)
前端·javascript·vue.js
_一条咸鱼_2 小时前
深入解析 Vue API 模块原理:从基础到源码的全方位探究(八)
前端·javascript·面试
患得患失9492 小时前
【前端】【难点】前端富文本开发的核心难点总结与思路优化
前端·富文本
执键行天涯2 小时前
在vue项目中package.json中的scripts 中 dev:“xxx“中的xxx什么概念
前端·vue.js·json
雯0609~2 小时前
html:文件上传-一次性可上传多个文件,将文件展示到页面(可删除
前端·html
涵信2 小时前
2024年React最新高频面试题及核心考点解析,涵盖基础、进阶和新特性,助你高效备战
前端·react.js·前端框架