JavaScript观察者模式

观察者模式又称为发布-订阅模式，它定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。观察者模式一个非常常见的例子就是DOM节点上的事件绑定。当body对象被点击时，body节点就会向订阅者发布这个消息。

document.body.addEventListener('click', function() {
  alert(2)
}, false)

document.body.click()

另外，Promise中的then返回也是一种发布-订阅的模式。当获得到数据之后（Promise状态发生变化），触发订阅。或者Vue中组件生命周期触发，以及Vue watch

观察者模式示例代码

// 主题，保存状态，状态变化之后触发所有观察者对象
class Subject {
  constructor() {
    this.state = 0
    this.observers = []
  }
  getState() {
    return this.state
  }
  // 修改值的时候触发观察者（订阅）
  setState(state) {
    this.state = state
    this.notifyAllObservers()
  }
  notifyAllObservers() {
    this.observes.forEach(observer => {
      observer.update()
    })
  }
  attach(observer) {
    this.observers.push(observer)
  }
}

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

// 测试
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)

s.setState(1)