前端开发实用：JS 实现发布-订阅模式，助力消息通讯

2023-09-13 23:23:59

发布-订阅模式简介

发布-订阅模式是一种消息通信范式，通过定义发布者、订阅者、调度中心来完成消息通信。发布者负责发布消息，订阅者负责订阅消息，调度中心负责管理事件并通知订阅者。发布-订阅模式可以实现消息的解耦，使发布者和订阅者之间不需要直接通信，从而提高系统的可扩展性和灵活性。

JS 实现发布-订阅模式

在 JS 中，我们可以通过以下步骤实现发布-订阅模式：

定义一个发布者对象。发布者对象负责发布消息。
定义一个订阅者对象。订阅者对象负责订阅消息。
定义一个调度中心对象。调度中心对象负责管理事件并通知订阅者。

下面是一个 JS 示例代码：

// 定义发布者对象
const publisher = {
  // 发布消息方法
  publish: function (eventName, data) {
    // 通过调度中心发布消息
    dispatcher.publish(eventName, data);
  }
};

// 定义订阅者对象
const subscriber = {
  // 订阅消息方法
  subscribe: function (eventName, callback) {
    // 通过调度中心订阅消息
    dispatcher.subscribe(eventName, callback);
  }
};

// 定义调度中心对象
const dispatcher = {
  // 订阅消息方法
  subscribe: function (eventName, callback) {
    // 将事件名和回调函数存储在事件池中
    this.eventPool[eventName] = this.eventPool[eventName] || [];
    this.eventPool[eventName].push(callback);
  },

  // 发布消息方法
  publish: function (eventName, data) {
    // 获取事件名对应的回调函数数组
    const callbacks = this.eventPool[eventName];

    // 如果有回调函数，则依次执行
    if (callbacks) {
      callbacks.forEach((callback) => {
        callback(data);
      });
    }
  },

  // 事件池
  eventPool: {}
};

// 订阅消息
subscriber.subscribe('eventName', (data) => {
  // 处理消息
  console.log(`收到消息：${data}`);
});

// 发布消息
publisher.publish('eventName', '你好，世界！');