做百度移动网站点,视频拍摄及制作培训,扬州工程建设招标网,centos 7.4 wordpress实现发布/订阅模式的基本思路是通过一个中介者#xff08;发布者#xff09;来管理订阅者#xff08;监听器#xff09;#xff0c;并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路#xff1a; 创建发布者对象#xff1a;首先…实现发布/订阅模式的基本思路是通过一个中介者发布者来管理订阅者监听器并在特定事件发生时通知所有订阅者执行相应的操作。下面是实现发布/订阅模式的基本思路 创建发布者对象首先创建一个包含订阅者列表和相关方法的对象这个对象将负责管理订阅者和通知订阅者。订阅者订阅事件订阅者可以通过订阅方法向发布者订阅事件即将自己的回调函数添加到订阅者列表中。发布者发布事件当某个事件发生时发布者会遍历订阅者列表并依次调用每个订阅者的回调函数将事件相关的数据传递给订阅者。订阅者收到通知订阅者收到发布者的通知后执行相应的操作处理事件相关的数据。取消订阅订阅者也可以选择取消订阅即将自己从订阅者列表中移除不再接收事件通知。 通过以上步骤就可以实现一个简单的发布/订阅模式。这种设计模式可以帮助实现组件间的解耦让代码更具扩展性和灵活性。在实际开发中你可以根据需求对发布/订阅模式进行扩展和优化例如添加事件类型、多重订阅、异步通知等功能。
在许多前端框架如Vue.js、React等中组件之间的通信经常通过发布/订阅模式来实现。例如Vue.js中的自定义事件就是一种发布/订阅模式的实现用于子组件与父组件或兄弟组件之间的通信。 //发布者
const publisher{//存储订阅者的数组;subscribers:[],//订阅方法接受一个回调函数作为订阅者subscribe:function(callback){this.subscribers.push(callback);},//取消订阅方法接收一个回调函数作为要取消订阅的订阅者unsubscribe:function(callback){//filter方法过滤要取消订阅的回调函数this.subscribersthis.subscribers.filter(itemitem!callback);},//发布方法接收要发布的数据并调用所有订阅者的回调函数publish:function(data){this.subscribers.forEach(itemitem(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---!
现实场景
在社交媒体和新闻应用中用户可以订阅自己感兴趣的话题或频道。当有新内容发布时系统会将这些内容推送给所有订阅了该话题或频道的用户。
