关于策略模式我所知道的

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

关键词：行为型 组织organize 分发dispatch

先让我们来看一段简单的代码，来初步了解下什么是策略模式：

使用策略模式的目的

从代码中我们可以看出，使用策略模式可以移除大量需要 if-else 或者 switch-case 分支判断的代码。

这就是我们使用策略模式的主要目的：

1. 将业务逻辑拆分(解耦)，控制代码的复杂度。
2. 添加新策略的时候，可以最小化改动。只要新增一个策略就可以解决问题。

什么是策略模式

策略模式，英文全称是 Strategy Design Pattern。在 GoF 的《设计模式》一书中，它是这样定义的

定义一组策略类，将每个策略分别封装起来，让它们可以互相替换。

结合自己在开发中的使用体验，我是这么理解的：

策略模式分两部分构成

1. 一组封装好的方法/类
2. 使方法/类可以相互替换，实现变更策略。

如何实现策略模式

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

策略模式可以说是前端用的比较多的设计模式，通过使用策略模式可以书写出让程序结构更灵活、可维护、可拓展的代码。

实现也非常简单，重点不在于如何实现方法，而是如何组织、调用这些方法。

应用场景

1. 表单校验

2. 按钮组

上面的代码

3. 多种登录方式

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');