定义
策略(Strategy)模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把使用算法的责任和算法的实现分割开来,并委派给不同的对象对这些算法进行管理。
策略(Strategy)模式最核心的一点就是,每个算法的结构是一样的,体现在 js 中,可能就是入参和返回值一样,这样才能保证可以相互替换。
结构:
- 对
ts而言,抽象的算法类,定义好每个算法的结构;对于js而言,就是一个顶级类,所有具体的算法类都是继承这个顶级类; - 具体的
算法类; - 环境(Context)类:用于切换策略和使用策略的类。
实现
// 1. 抽象出整个算法的结构
abstract class Strategy {
abstract strategyMethod(a: number, b: number): number
}
// 2. 声明具体的算法
class AddStrategy extends Strategy {
strategyMethod(a: number, b: number): number {
return a + b;
}
}
class Subtract extends Strategy {
strategyMethod(a: number, b: number): number {
return a - b;
}
}
// 3. 实现 Context 类
interface IStrategy extends Strategy {
}
class Context {
strategy: IStrategy;
constructor(strategy?: IStrategy) {
this.setStrategy(strategy);
}
// 设置当前需要使用的算法
setStrategy(strategy: IStrategy): this {
this.strategy = strategy;
return this;
}
// 执行算法
handle(a: number, b: number): number {
return this.strategy.strategyMethod(a, b);
}
}
// 4. 初始化
const context = new Context();
const add = new AddStrategy();
const subtract = new Subtract();
const result1 = context.setStrategy(add).handle(9, 3);
console.log(result1); // 12
const result2 = context.setStrategy(subtract).handle(9, 3);
console.log(result2); // 6
本文介绍了策略模式在前端开发中的应用,详细阐述了其定义、结构及实现方式。策略模式允许在不修改客户端代码的情况下,通过切换不同策略对象来改变算法,保持了代码的灵活性和可扩展性。

被折叠的 条评论
为什么被折叠?



