【十月打卡】第71天 前端常用的7种设计模式(7)

观察者模式

概念

一个主体有多个观察者，当主体的状态发生改变时，通知观察者。

代码示例和UML类图

代码示例：

class Subject {
  private state = 0;
  private observers: Observer[] = [];

  getState() {
    return this.state;
  }

  setState(newState: number) {
    this.state = newState;
    this.notify(newState);
  }

  attach(observer: Observer) {
    this.observers.push(observer);
  }

  private notify(state: number) {
    this.observers.forEach((observer) => {
      observer.update(state);
    });
  }
}

class Observer {
  constructor(private name: string) {}
  update(state: number) {
    console.log(`${this.name}先生：${state}号客人的餐已经好了`);
  }
}

const observer1 = new Observer('小明');
const observer2 = new Observer('小张');

const subject = new Subject();

subject.attach(observer1);
subject.attach(observer2);
subject.setState(2);

UML类图：

应用场景

• DOM事件
• Vue、React的生命周期
• Vue的watch、watchEffect
• 异步回调
• MutationObserver