发布/订阅模式

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

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

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

  • 在许多前端框架(如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---!

现实场景:

  • 在社交媒体和新闻应用中,用户可以订阅自己感兴趣的话题或频道。当有新内容发布时,系统会将这些内容推送给所有订阅了该话题或频道的用户。
  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向画

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值