当前位置：首页 > article >正文

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

article 2024/9/21 16:55:05

在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 类有三个主要方法：