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

发布/订阅模式

news 2025/8/3 8:36:59

实现发布/订阅模式的基本思路是通过一个中介者（发布者）来管理订阅者（监听器），并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路：

创建发布者对象：首先，创建一个包含订阅者列表和相关方法的对象，这个对象将负责管理订阅者和通知订阅者。
订阅者订阅事件：订阅者可以通过订阅方法向发布者订阅事件，即将自己的回调函数添加到订阅者列表中。
发布者发布事件：当某个事件发生时，发布者会遍历订阅者列表，并依次调用每个订阅者的回调函数，将事件相关的数据传递给订阅者。
订阅者收到通知：订阅者收到发布者的通知后，执行相应的操作，处理事件相关的数据。
取消订阅：订阅者也可以选择取消订阅，即将自己从订阅者列表中移除，不再接收事件通知。

通过以上步骤，就可以实现一个简单的发布/订阅模式。这种设计模式可以帮助实现组件间的解耦，让代码更具扩展性和灵活性。在实际开发中，你可以根据需求对发布/订阅模式进行扩展和优化，例如添加事件类型、多重订阅、异步通知等功能。

在许多前端框架（如Vue.js、React等）中，组件之间的通信经常通过发布/订阅模式来实现。例如，Vue.js中的自定义事件就是一种发布/订阅模式的实现，用于子组件与父组件或兄弟组件之间的通信。

//发布者
const publisher={//存储订阅者的数组;subscribers:[],//订阅方法，接受一个回调函数作为订阅者subscribe:function(callback){this.subscribers.push(callback);},//取消订阅方法，接收一个回调函数作为要取消订阅的订阅者unsubscribe:function(callback){//filter方法过滤要取消订阅的回调函数this.subscribers=this.subscribers.filter(item=>item!==callback);},//发布方法，接收要发布的数据，并调用所有订阅者的回调函数publish:function(data){this.subscribers.forEach(item=>item(data));}
};
// 定义订阅者函数  
// 订阅者1  
function subscriber1(data) {  console.log('Subscriber 1 received data: ' + data);  }  // 订阅者2  function subscriber2(data) {  console.log('Subscriber 2 received data: ' + data);  }  // 订阅者3  function subscriber3(data) {  console.log('Subscriber 3 received data: ' + data);  }  
// 订阅  
// 将订阅者函数添加到发布者的订阅者列表中  
publisher.subscribe(subscriber1);  
publisher.subscribe(subscriber2);  
publisher.subscribe(subscriber3);  //发布消息
//所有订阅者都会收到并处理这个消息
publisher.publish('Hello, world!');// 取消订阅 subscriber2  
// 从发布者的订阅者列表中移除subscriber2  
publisher.unsubscribe(subscriber2);  
// 再次发布消息  
// subscriber2不会收到这条消息，因为已经取消了订阅  
publisher.publish('Hello, world!');

PS D:\练\js\手写\10-发布订阅模式> node .\lian.js\
Subscriber 1 received data: Hello, world!
Subscriber 2 received data: Hello, world!
Subscriber 3 received data: Hello, world!
Subscriber 1 received data: Hello, world---!
Subscriber 3 received data: Hello, world---!

现实场景：