本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词：行为型 组织organize 分发dispatch
先让我们来看一段简单的代码，来初步了解下什么是策略模式：
使用策略模式的目的
从代码中我们可以看出，使用策略模式可以移除大量需要 if-else 或者 switch-case 分支判断的代码。
这就是我们使用策略模式的主要目的：
- 将业务逻辑拆分(解耦)，控制代码的复杂度。
- 添加新策略的时候，可以最小化改动。只要新增一个策略就可以解决问题。
什么是策略模式
策略模式，英文全称是 Strategy Design Pattern。在 GoF 的《设计模式》一书中，它是这样定义的
定义一组策略类，将每个策略分别封装起来，让它们可以互相替换。
结合自己在开发中的使用体验，我是这么理解的：
策略模式分两部分构成
- 一组封装好的方法/类
- 使方法/类可以相互替换，实现变更策略。
如何实现策略模式
1. 一组封装好的方法/类
interface Strategy { doAlgorithm(data: string[]): string[]; } // 策略A class ConcreteStrategyA implements Strategy { public doAlgorithm(data: string[]): string[] { return data.sort(); } } // 策略B class ConcreteStrategyB implements Strategy { public doAlgorithm(data: string[]): string[] { return data.reverse(); } }
2. 使方法/类相互替换，实现变更策略。
现在我们有了一组策略，还需要判断应该使用哪个策略。这就又需要新增一个类去解决这个问题。
// 一组策略的代码 // 执行策略的工厂类 class Context { private strategy: Strategy; constructor(strategy: Strategy) { this.strategy = strategy; } // 设置/切换策略 public setStrategy(strategy: Strategy) { this.strategy = strategy; } // 执行相应的策略逻辑 public doSomeBusinessLogic(arr: string[]): void { const result = this.strategy.doAlgorithm(arr); console.log(result.join(",")); } } // 测试代码 const arr: string[] = ["a", "b", "c", "d", "e"]; const context = new Context(new ConcreteStrategyA()); context.doSomeBusinessLogic(arr); // a,b,c,d,e context.setStrategy(new ConcreteStrategyB()); context.doSomeBusinessLogic(arr); // e,d,c,b,a
策略模式可以说是前端用的比较多的设计模式，通过使用策略模式可以书写出让程序结构更灵活、可维护、可拓展的代码。
实现也非常简单，重点不在于如何实现方法，而是如何组织、调用这些方法。
应用场景
- 表单校验
- 按钮组
上面的代码
- 多种登录方式
interface Strategy { authenticate(...args: any): any; } class Authenticator { private strategy: Strategy; constructor(strategy: Strategy) { this.strategy = strategy; } // 设置/切换策略 public setStrategy(strategy: Strategy) { this.strategy = strategy; } // 执行相应的策略逻辑 public authenticate(...args: any): any { if (!this.strategy) { console.log('尚未设置认证策略'); return; } return this.strategy.authenticate(...args); } } class WechatStrategy implements Strategy { authenticate(wechatToken: string) { if (wechatToken !== 'xxx') { console.log('无效的微信用户'); return; } console.log('微信认证成功'); } } class LocalStrategy implements Strategy { authenticate(username: string, password: string) { if (username !== 'xxx' && password !== 'xxx') { console.log('账号或密码错误'); return; } console.log('账号和密码认证成功'); } } const auth = new Authenticator(new WechatStrategy()); auth.authenticate('xxx'); auth.setStrategy(new LocalStrategy()); auth.authenticate('xxx', 'xxx');
