TypeScript实现设计模式——观察者模式

观察者模式是一种行为设计模式，容许一个对象将其状态的改变通知其余对象。

观察者模式提供了一种做用于任何实现了订阅者接口的对象的机制， 可对其事件进行订阅和取消订阅。

图片来源：https://refactoringguru.cn/design-patterns/observer

观察者模式是一种在前端领域应用十分普遍的设计模式，特别是在图形界面的组件中，若是你自定义了一个按钮组件，那么你极可能须要用到观察者模式。

观察者模式的核心成员有两个，一个是做为事件发布者的Subject类，另外一个是做为事件接收者的Observer类。

Subject部分

Subject类所具备的公共部分是对订阅者的管理和向全部订阅者发布消息，而具体Subject所负责的业务逻辑须要放到各自的Subject类中。

Subject接口

interface Subject {
  // 添加观察者
  attach(observer: Observer): void;
  // 移除观察者
  detach(observer: Observer): void;
  // 通知全部观察者
  notify(): void;
}

具体Subject类

class ConcreteSubject implements Subject {
  // 发布者状态，测试使用
  public state: number;

  // 订阅者名单
  public observers: Array<Observer> = [];

  // 管理订阅方法
  public attach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex !== -1) {
      return console.log('已订阅');
    }

    this.observers.push(observer);
    console.log('订阅成功');
  }

  public detach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex === -1) {
      return console.log('订阅者未订阅');
    }

    this.observers.splice(observerIndex, 1);
    console.log('订阅者已移除');
  }

  public notify(): void {
    console.log('通知全部订阅者');
    for (const observer of this.observers) {
      observer.update(this);
    }
  }
    
  // 订阅管理之外的逻辑
  public someLogic() {
    this.state = Math.floor(Math.random() * 10 + 1);

    console.log(`我更改了个人状态：state=${this.state}`);
    this.notify();
  }
}

Observer部分

观察者只须要根据发布者的发出的消息来判断本身是否须要作出回应便可。

Observer接口

interface Observer {
  // 对发布者发出的更新消息做出回应
  update(subject: Subject): void;
}

具体Observer类

//具体观察者A
class ConcreteObserverA implements Observer {
  public update(subject: ConcreteSubject) {
    if (subject.state <= 5) {
      console.log('观察者A做出回应');
    }
  }
}

// 具体观察者B
class ConcreteObserverB implements Observer {
  public update(subject: ConcreteSubject) {
    if (subject.state > 5) {
      console.log('观察者B做出回应');
    }
  }
}

测试代码

由于是随机数，可能会得不到想要的结果，能够多尝试几回

const subject = new ConcreteSubject();

const observerA = new ConcreteObserverA();
subject.attach(observerA);

const observerB = new ConcreteObserverB();
subject.attach(observerB);

subject.someLogic();

subject.detach(observerB);

subject.someLogic();