3-1-8-观察者模式

观察者模式

Vue 的响应式机制中使用了观察者模式。

观察者模式和发布订阅模式的区别是没有消息中心只有发布者和订阅者，并且发布者要知道订阅者的存在。

• 观察者（订阅者） – Watcher

  • update(): 当事件发生时具体要做的事情

• 目标（发布者） – Dep

  • subs 数组：存储所有的观察者
  • addSub()： 添加观察者
  • notify()：当事件发生时调用所有观察者的 update() 方法

• 没有事件中心

// 发布者-目标
class Dep {
  constructor () {
    // 记录所有的订阅者
    this.subs = []
  }

  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }

  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

// 订阅者-观察者
class Watcher {
  update () {
    console.log('update')
  }
}

// 测试
let dep = new Dep()
let watcher = new Watcher()

dep.addSub(watcher)
dep.notify()

总结

• 观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。

• 发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。