观察者模式

1. 介绍

• 观察者(订阅者) -- 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()

2. 发布订阅模式与观察者模式的区别

• 观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模

  式的订阅者与发布者之间是存在依赖的。

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