发布订阅
- 定义了对象间一对多的问题
- 发布订阅的核心组成
因为有了消息调度中心,实现发布者与订阅者的解耦。
订阅者把自己想要监听的事件注册到调度中心,发布者触发事件的时候会通知调度中心,调度中心通知监听此事件的订阅者进行回调执行
- 发布订阅与观察者模式的区别在哪里?
- 发布订阅者模式中存在调度中心,观察者模式中没有调度中心
- 当状态发生改变时,发布订阅模式无须主动通知,由调度中心通知订阅者
模拟一个发布订阅
- 如果我们自己想要实现发布订阅,应该考虑哪些要素?
- 要有一个缓存队列,存放订阅者信息 :events 用来缓存事件队列,格式 约为 events:{
eventName1:[fb1,fb2],
eventName2:[fb1,fb2]
} - 发布者具有增加、删除订阅者的能力
- 状态改变时通知所有订阅者执行监听:当某个事件发生的时候,会遍历events[eventName]的回调函数队列,遍历执行即可实现
- 要有一个缓存队列,存放订阅者信息 :events 用来缓存事件队列,格式 约为 events:{
// events存放事件及回调events:{a:[cb,cb2],b:[fd,fd2]}
class PubSub{
constructor(){
this.events={}
}
// 订阅者
subscribe(eventName,callback){
if(this.events[eventName]){
this.events[eventName].push(callback)
}else{
this.events[eventName] = [callback]
}
}
// 发布者
publish(eventName,...arg){
const items = this.events[eventName]
if(items&&items.length){
items.forEach(function(callback){
callback.call(this,...arg)
});
}
}
}
let ps = new PubSub()
ps.subscribe('click',()=>{
console.log('click被执行了')
})
ps.subscribe('click',()=>{
console.log('click被执行了2')
})
ps.publish('click')
ps.publish('click')
上述代码执行之后的打印结果为:
click被执行了,
click被执行了2,
click被执行了,
click被执行了2