js基础之---手写发布者订阅模式

发布者订阅模式： 是一种对象之间一对多的依赖关系，当一个对象状态发生改变时，所以依赖于他的对象都将得到状态改变的通知。

角色：

• 订阅者（Subscriber）把自己想订阅的事件 注册（Subscribe）到调度中心（Event Channel）;

• 当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由 调度中心 统一调度（Fire Event）订阅者注册到调度中心的处理代码。

手写发布者订阅----思路

• 创建一个Class类
• 在类里面创建一个消息队列
• 用on将订阅者注册到调度中心
• 用emit发布者发布事件到调度中心，调度中心处理代码
• 用off取消订阅

具体代码：

    class Observer {
      message: {};
      constructor() {
        this.message = {};
      }
      // 向消息队列添加内容
      //type  事件名
      //callback  回调函数
      $on(type: string, callback: () => void) {
        if (!this.message[type]) {
          this.message[type] = [];
        }
        this.message.push(callback);
      }
      // 触发消息队列中的内容
      $emit(type) {
        if (!this.message[type]) return;
        this.message[type].forEach((item) => {
          // 挨个执行每一个消息的回调函数callback
          item();
        });
      }
      $off(type, callback) {
        if (!this.message[type]) return;
        if (!callback) {
          this.message[type] = undefined;
        }
        this.message[type] = this.message[type].filter((item) => item != callback);
      }
}

// 创建一个订阅者
const person1 = new Observer();
person1.$on("type", () => {});