观察者模式

介绍

• 发布 & 订阅
• 一对多

设计原则验证

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

示例

• 点咖啡，点好之后坐等被叫

// 主题，保存状态，状态变化之后触发所有观察者对象
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} 更新，state：${this.subject.getState()}`)
  }
}

// 测试

let s = new Subject();
let o1 = new Observer('黄', s)
let o2 = new Observer('黄2', s)
let o3 = new Observer('黄3', s)

s.setState(6)

场景

• nodejs中：处理http请求；多进程通讯;
• vue 和 react 组件生命周期触发;
• vue watch;