记发布订阅和观察者模式

发布订阅模式

简单来说，需要三个角色

• 发布者
• 事件队列
• 订阅者

发布者 -> 事件队列 <=> 订阅者

一次完整流程

• 订阅者向事件队列订阅事件E
• 发布者向事件队列发布事件E
• 事件队列通知事件E的所有订阅者，订阅者接收

class Event {
  constructor() {
    // 事件队列
    this.listeners = {};
  }
  // 订阅方法
  on(eventType, listener) {
    if (!this.listeners[eventType]) {
      this.listeners[eventType] = [];
    }
    this.listeners[eventType].push(listener);
  }
  // 发布方法
  emit(eventType, data) {
    const callbacks = this.listeners[eventType];
    if (callbacks) {
      callbacks.forEach((c) => {
        c(data);
      });
    }
  }
}

const event = new Event();
event.on("open", (data) => {
  console.log(data);
});
event.emit("open", { open: true });

观察者模式

需要两个角色

• 目标
• 观察者

目标 <=> 观察者

一次完整流程

• 观察者观察目标
• 一旦目标发生变化，目标会主动通知观察者

function observer(obj, target, callback) {
  if (!obj.data) {
    obj.data = {};
  }
  Object.defineProperty(obj, target, {
    get() {
      return this.data[target];
    },
    set(val) {
      this.data[target] = val;
      // 目标通知观察者
      callback && callback(val);
    },
  });
  if (obj.data[target]) {
    callback && callback(obj.data[target]);
  }
}

算法 · 2021年6月1日 · 被浏览 - 次