实现发布/订阅模式的基本思路是通过一个中介者(发布者)来管理订阅者(监听器),并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路:
- 创建发布者对象:首先,创建一个包含订阅者列表和相关方法的对象,这个对象将负责管理订阅者和通知订阅者。
- 订阅者订阅事件:订阅者可以通过订阅方法向发布者订阅事件,即将自己的回调函数添加到订阅者列表中。
- 发布者发布事件:当某个事件发生时,发布者会遍历订阅者列表,并依次调用每个订阅者的回调函数,将事件相关的数据传递给订阅者。
- 订阅者收到通知:订阅者收到发布者的通知后,执行相应的操作,处理事件相关的数据。
- 取消订阅:订阅者也可以选择取消订阅,即将自己从订阅者列表中移除,不再接收事件通知。
通过以上步骤,就可以实现一个简单的发布/订阅模式。这种设计模式可以帮助实现组件间的解耦,让代码更具扩展性和灵活性。在实际开发中,你可以根据需求对发布/订阅模式进行扩展和优化,例如添加事件类型、多重订阅、异步通知等功能。
- 在许多前端框架(如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---!
现实场景:
- 在社交媒体和新闻应用中,用户可以订阅自己感兴趣的话题或频道。当有新内容发布时,系统会将这些内容推送给所有订阅了该话题或频道的用户。