观察者模式

• 发布 & 订阅
• 一对多

示例

• 点咖啡, 点好就坐着等

---

UML 类图

• dlUML.png

• 代码

// 主题, 保存状态, 状态变化后触发所有观察者对象
class Subject {
  constructor() {
    this.state = 0;
    this.observers = [];
  }
  getState() {
    return this.state;
  }
  setState(state) {
    this.state = state;
    this.notifyAllObservers();
  }
  notifyAllObservers() {
    this.observers.forEach(observer => {
      observer.update();
    });
  }
  attach(observer) {
    this.observers.push(observer);
  }
}

// 观察者
class Observer {
  constructor(name, subject) {
    this.name = name;
    this.subject = subject;
    this.subject.attach(this);
  }
  update() {
    console.log(`${this.name} update, state: ${this.subject.getState()}`);
  }
}

// 测试
const s = new Subject();
const o1 = new Observer("o1", s);
const o2 = new Observer("o2", s);
const o3 = new Observer("o3", s);

s.setState(1);
s.setState(2);
s.setState(3);

---

场景

网页事件绑定

网页事件绑定.png

Promise

Promise.png Promise2.png

jQuery callbacks

jquery.png

nodejs 自定义事件

node1.png node2.png node3.png node4.png node5.png

其他场景

• nodejs 中: 处理 http 请求; 多进程通讯

http
多进程通讯.png

• vue 和 React 组件生命周期触发
• vue watch

react.png
react2.png

---

设计原则验证

• 主题和观察者分离, 不是主动触发而是被动监听, 两者解耦
• 符合开放封闭原则