JavaScript策略模式：多算法切换技巧

策略模式是一种让JavaScript代码更灵活、可维护的优雅设计思想——它将不同算法（如会员折扣、表单验证、排序逻辑等）封装为独立、可互换的策略对象，通过上下文动态切换，彻底告别冗长难维护的if-else或switch判断；文章以促销价格计算器为例，直观展示了如何用简洁的策略映射和PriceCalculator类实现运行时自由切换，并进一步通过StrategyContainer支持插件式动态注册新策略，完美践行开闭原则，特别适合前端中多场景共存、规则频繁变化的业务需求。

在前端开发中，面对多种计算或处理逻辑时，如何让代码更灵活、可维护？策略模式提供了一个优雅的解决方案。它把不同的算法封装成独立的策略类，允许在运行时根据需要动态切换，避免冗长的条件判断和重复代码。

什么是策略模式？

策略模式定义了一系列算法，把它们各自封装起来，并且使它们可以互相替换。这些算法在结构上保持一致，外部可以透明地调用。

核心思想是：将“行为”或“算法”与“使用它的对象”解耦。比如表单验证、折扣计算、排序方式等场景都适合使用策略模式。

实际应用场景示例

假设我们要实现一个促销价格计算器，不同会员等级享受不同折扣：

传统做法可能会用一连串 if-else 或 switch 判断，但随着规则增多，代码会变得难以维护。使用策略模式可以清晰分离每种计算逻辑。

代码实现如下：

// 定义策略对象
const discountStrategies = {
  normal: (price) => price,
  gold: (price) => price * 0.9,
  platinum: (price) => price * 0.8,
  diamond: (price) => price * 0.7
};
<p>// 上下文类：负责调用策略
class PriceCalculator {
constructor(strategy = 'normal') {
this.setStrategy(strategy);
}</p><p>setStrategy(strategy) {
if (!discountStrategies[strategy]) {
throw new Error(<code>不支持的策略: ${strategy}</code>);
}
this.strategy = strategy;
}</p><p>calculate(price) {
return discountStrategies<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5seqmRkIekrtyzon2rhdC-iIKYhae2pYe6gpuvnHVnvqaFqX-NoG20qruygmSE37FmhpWR3b6jh7dtbQ' rel='nofollow'>this.strategy</a>;
}
}</p><p>// 使用示例
const calculator = new PriceCalculator('gold');
console.log(calculator.calculate(100)); // 输出 90</p><p>calculator.setStrategy('diamond');
console.log(calculator.calculate(100)); // 输出 70</p>

优势与适用场景

策略模式带来的好处很明显：

• 避免多重条件判断，提升代码可读性
• 新增算法只需添加新策略，符合开闭原则
• 算法可独立变化，便于测试和复用

常见适用场景包括：

扩展性优化建议

为了进一步提高灵活性，可以将策略注册机制抽离出来，支持动态注册新策略：

class StrategyContainer {
  constructor() {
    this.strategies = {};
  }
<p>add(name, fn) {
this.strategies[name] = fn;
}</p><p>execute(name, ...args) {
if (!this.strategies[name]) {
throw new Error(<code>策略不存在: ${name}</code>);
}
return this.strategies<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6ybKV8pn-xv5azon2rhM-tZoPQhqfLsIathWWweYGtso2cmYmzgm20p9FsjoaEmL2uft6St7qjhtN9ZQ' rel='nofollow'>name</a>;
}
}</p><p>// 动态添加策略
const discounts = new StrategyContainer();
discounts.add('student', price => price <em> 0.95);
discounts.add('vip', price => price </em> 0.6);</p><p>console.log(discounts.execute('student', 100)); // 95</p>

这种方式更适合插件化或配置化的系统设计。

基本上就这些。策略模式不复杂，但在需要多算法共存并动态切换的场景下非常实用。关键是把每个算法当作“一等公民”来对待，统一接口，自由替换。

今天关于《JavaScript策略模式：多算法切换技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于策略模式的内容请关注golang学习网公众号！