发布-订阅模式的 JS 实现

前言

• 发布-订阅是一种消息范式，通过定义发布者、订阅者、调度中心来完成消息通信。这是前端常用的消息通讯模式。
• 事件由调度中心统一管理，由订阅者在调度中心订阅（注册）事件，发布者通过调度中心发布（触发）事件，订阅者通过事件收到消息，以达到消息通信。

实现

      function EventCenter() {
        this.events = {};
      }

      // 订阅
      EventCenter.prototype.on = function (eventName, callback) {
        if (!this.events[eventName]) {
          // 对不存在的订阅进行初始化
          this.events[eventName] = [callback];
        } else {
          // 对存在的订阅，继续加入副作用，一个订阅事件可以有多个副作用
          this.events[eventName].push(callback);
        }
      };

      // 发布
      EventCenter.prototype.trigger = function (eventName) {
        if (this.events[eventName]) {
          // 对当前存在的订阅，进行发布，处理所有的副作用
          this.events[eventName].forEach((cb) => cb());
        }
      };

      // 取消订阅
      EventCenter.prototype.off = function (eventName, callback) {
        if (this.events[eventName]) {
          const index = this.events[eventName].findIndex(
            (cb) => cb === callback
          );
          if (index !== -1) {
            this.events[eventName].splice(index, 1);
          }
          if (this.events[eventName].length === 0 || !callback) {
            delete this.events[eventName];
          }
        }
      };

      // 订阅和发布只进行一次
      EventCenter.prototype.once = function (eventName, callback) {
        const that = this; // 保留本作用域 this
        // once 调用其实就是重写callback，调用完真实的 callback 之后，off() 即可
        const fn = function () {
          callback();
          that.off(eventName, fn); // fn 里面的的 this 是 fn 本身的，故使用上面 that 才可调用 off()
        };
        this.on(eventName, fn); // 这里用 this 或者 that 没有区别
      };

      // 实例化构造函数
      const event = new EventCenter();

      const run = function () {
        console.log("running: 订阅发布成功");
      };
      const jump = function () {
        console.log("jumping: 订阅发布成功");
      };
      const fly = function () {
        console.log("flying: 订阅发布成功");
      };

      event.on("running", run);
      event.on("jumping", jump);
      event.once("flying", fly);

      event.off("jumping", jump); // 移除 jumping；
      event.trigger("jumping");   // jumping 无法发布；
      event.trigger("running");   // 触发 running，可以执行；
      event.trigger("running");   // 再次触发 running，可以继续执行；
      event.trigger("flying");    // 触发 flying，只执行一次，再次将不再执行；
      event.trigger("flying");    // 再次触发 flying 将不再执行；

运行结果