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

🕗 发布于 2024-09-20 20:50 javascript 开发语言 ecmascript

在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)：向一个主题发布消息，所有订阅了该主题的回调函数都会被调用，并接收到发布的消息数据。

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

原文地址：https://blog.csdn.net/qq_39056703/article/details/142391805

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

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

相关文章