用 JS 实现一个发布订阅模式

在JavaScript中，发布订阅模式（Pub/Sub）是一种常用的设计模式，用于实现不同组件之间的解耦通信。在这种模式中，发布者（Publisher）不直接给订阅者（Subscriber）发送消息，而是将消息发送到一个中心主题（Topic），订阅了该主题的订阅者会收到这个消息。

下面是一个简单的发布订阅模式的实现示例：

class PubSub {  constructor() {  this.topics = {}; // 存储所有主题的订阅者  }  // 订阅主题  subscribe(topic, callback) {  if (!this.topics[topic]) {  this.topics[topic] = []; // 如果该主题不存在，则初始化一个空数组  }  this.topics[topic].push(callback); // 将回调函数添加到订阅者列表中  return () => { // 返回一个取消订阅的函数  this.unsubscribe(topic, callback);  };  }  // 取消订阅  unsubscribe(topic, callback) {  if (this.topics[topic]) {  const index = this.topics[topic].indexOf(callback);  if (index > -1) {  this.topics[topic].splice(index, 1); // 从订阅者列表中移除回调函数  }  }  }  // 发布消息  publish(topic, data) {  if (this.topics[topic]) {  this.topics[topic].forEach(callback => {  callback(data); // 遍历订阅者列表，调用每个订阅者的回调函数  });  }  }  
}  // 使用示例  
const pubSub = new PubSub();  // 订阅者1  
const subscriber1 = (data) => {  console.log('Subscriber 1:', data);  
};  // 订阅者2  
const subscriber2 = (data) => {  console.log('Subscriber 2:', data);  
};  // 订阅主题  
const unsubscribe1 = pubSub.subscribe('news', subscriber1);  
pubSub.subscribe('news', subscriber2);  // 发布消息  
pubSub.publish('news', 'Hello, Pub/Sub!');  // 取消订阅  
unsubscribe1();  
pubSub.publish('news', 'This message will not be seen by subscriber 1.');

在这个示例中，PubSub 类有三个主要方法：

• subscribe(topic, callback)：订阅一个主题，并传入一个回调函数。该方法返回一个函数，用于取消订阅。
• unsubscribe(topic, callback)：取消订阅一个主题上的回调函数。
• publish(topic, data)：向一个主题发布消息，所有订阅了该主题的回调函数都会被调用，并接收到发布的消息数据。

通过这种方式，发布者和订阅者之间实现了松耦合，它们不需要知道对方的存在，只需要通过主题进行通信。