前端积累 | 发布-订阅模式原理及实现

发布-订阅模式是前端开发中非常常见且有用的一种设计模式。几乎所有的前端开发框架都会用到它。订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。

原理

通过上文我们可以知道，一个完整的发布订阅模式需要以下的几个角色。

• 订阅者：把方法注册到调度中心。
• 发布者：把事件发布到调度中心。
• 调度中心：当事件被发布者发布后，运行订阅者发送的方法。

实现思路

调度中心

1. 创建一个类，提供一个方法$on，来把传入的函数event和对应的listener添加到消息队列中。
2. 消息队列中可以以键值对的形式存储event和listener。
3. 提供一个接收$emit方法的参数，根据收到的listener值，来调用消息队列中对应的函数。

订阅者和发布者

• 想要向调度中心注册方法的时候，就是让调度中心运行$on，然后传入对应的参数。
• 发布者需要发布的时候，让调度中心$emit一下。

代码示例

class EventBus{
    constructor(){
        this.eventList={};
    }
    $on(event,listener){
        if(this.eventList[event] === undefined){
            this.eventList[event] = [];
        }
        this.eventList[event].push(listener);
    }
    $emit(event,...args){
        if(this.eventList[event]){
            this.eventList[event].forEach((listener)=>{
                listener(...args);
            })
        }
    }
}
const bus = new EventBus();
bus.$on('a',()=>{
    console.log("a,1");
})
bus.$on('a',()=>{
    console.log("a,2");
})
bus.$on('b',()=>{
    console.log("b,1");
})
bus.$emit('a');// a,1 a,2