实现一个发布订阅模式 (PubSub)

推荐答案

// www.javascriptcn.com code example
class PubSub {
  constructor() {
    this.events = {};
  }

  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

  unsubscribe(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

// 使用示例
const pubsub = new PubSub();

const callback1 = data => console.log('Callback 1:', data);
const callback2 = data => console.log('Callback 2:', data);

pubsub.subscribe('event1', callback1);
pubsub.subscribe('event1', callback2);

pubsub.publish('event1', 'Hello, PubSub!');

pubsub.unsubscribe('event1', callback1);

pubsub.publish('event1', 'Hello again!');

本题详细解读

1. 发布订阅模式的概念

发布订阅模式（PubSub）是一种消息传递模式，它允许对象之间通过事件进行通信。发布者（Publisher）发布事件，订阅者（Subscriber）订阅事件并接收通知。这种模式解耦了发布者和订阅者，使得它们不需要直接知道对方的存在。

2. 实现思路

• 事件存储：使用一个对象 events 来存储所有的事件及其对应的回调函数。
• 订阅事件：通过 subscribe 方法，将回调函数添加到指定事件的回调列表中。
• 发布事件：通过 publish 方法，触发指定事件的所有回调函数，并传递数据。
• 取消订阅：通过 unsubscribe 方法，从指定事件的回调列表中移除指定的回调函数。

3. 代码解析

• 构造函数：初始化一个空对象 events 用于存储事件及其回调函数。
• subscribe 方法：检查事件是否存在，如果不存在则创建一个空数组，然后将回调函数添加到该事件的回调列表中。
• publish 方法：检查事件是否存在，如果存在则遍历该事件的所有回调函数并执行它们，传递数据作为参数。
• unsubscribe 方法：检查事件是否存在，如果存在则从该事件的回调列表中移除指定的回调函数。

4. 使用示例

• 创建 PubSub 实例。
• 定义两个回调函数 callback1 和 callback2。
• 订阅 event1 事件，并绑定 callback1 和 callback2。
• 发布 event1 事件，触发所有绑定的回调函数。
• 取消订阅 callback1，再次发布 event1 事件，只有 callback2 会被触发。

通过这种方式，发布订阅模式可以有效地管理事件和回调函数之间的关系，实现松耦合的通信机制。