Design Patterns（设计模式-观察者）

观察者模式

介绍

• 观察者(订阅者) -- Watcher
  • update()：当事件发生时，具体要做的事情
• 目标(发布者) -- Dep
  • subs 数组：存储所有的观察者
  • addSub()：添加观察者
  • notify()：当事件发生，调用所有观察者的 update() 方法
• 没有事件中心

// 目标(发布者)

  // Dependency
  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 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。
• 发布/订阅模式
  • 由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

​​​​​​​Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.