模拟实现发布订阅者

发布订阅

• 定义了对象间一对多的问题
• 发布订阅的核心组成
  

因为有了消息调度中心，实现发布者与订阅者的解耦。

订阅者把自己想要监听的事件注册到调度中心，发布者触发事件的时候会通知调度中心，调度中心通知监听此事件的订阅者进行回调执行

2. 发布订阅与观察者模式的区别在哪里？

• 发布订阅者模式中存在调度中心，观察者模式中没有调度中心
• 当状态发生改变时，发布订阅模式无须主动通知，由调度中心通知订阅者

模拟一个发布订阅

• 如果我们自己想要实现发布订阅，应该考虑哪些要素？
  • 要有一个缓存队列，存放订阅者信息 :events 用来缓存事件队列，格式 约为 events:{
    eventName1:[fb1,fb2],
    eventName2:[fb1,fb2]
    }
  • 发布者具有增加、删除订阅者的能力
  • 状态改变时通知所有订阅者执行监听:当某个事件发生的时候，会遍历events[eventName]的回调函数队列，遍历执行即可实现

// 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