实现一个完整的发布订阅模式

前言

发布-订阅模式是我们经常会接触的到的设计模式，它定义一个对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布-订阅模式

现实生活中的发布订阅模式

毛小星是一个球鞋爱好者，他最近在逛淘宝的时候，看上了一双芝加哥配色的 AJ One 篮球鞋，但是问过客服美眉被告知，这个配色的鞋已经售罄了。好在客服美眉告诉毛小星，不久后耐克公司还会复刻一批芝加哥配色的球鞋，但是具体什么时候，目前还没有确切消息。
于是客服美眉告诉毛小星，只要收藏我们的店铺，一旦有新球鞋进货的时候，就立马发出消息通知毛小星。此时杨小A也想买一双球鞋，于是也按照客服美眉的建议收藏了店铺，耐心的等待球鞋进货的消息。
上面这个例子中，球鞋到货，自动发送消息通知就是一个典型的发布-订阅模式，毛小星、杨小A这两个购买者就是订阅者，他们收藏了店铺，店铺就作为发布者，在球鞋到货的时候就会给遍历收藏店铺的订阅者，然后给它们发送消息。
其实还有很多发布-订阅模式的应用场景，例如 Vue 的 EventBus，微前端中的两个子应用之间的通信。

发布-订阅模式的优点

支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。买鞋的人不用再给天天给客服美眉发送消息了，一旦有鞋子，店铺会自动通知买家。

这个特性被广泛应用于异步编程中，这是一种替代传递回调函数的方案。比如，我们可以订阅 ajax 请求的 error、success等事件。或者如果想在动画的每一帧完成之后做一些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布-订阅模式，我们就无需过多关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。

发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变；同理卖家（发布者）它只需要将鞋子来货的这件事告诉订阅者(买家)，他不管买家到底买还是不买，还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

第二点说明发布-订阅模式可以去到对象之间的硬编码的通知机制，一个对象不用再显示的调用另外一个对象的某个接口。发布-订阅模式让两个对象松耦合得联系在一起，虽然不太清楚彼此的细节，但这不影响他们之间互相通信。当有新的订阅者出现时，发布者的代码不需要任何修改；同样发布者需要改变时，也不会影响到之前的订阅者。只要之前约定的事件名没有变化，就可以自由地改变它们。

发布-订阅模式的缺点

创建订阅者需要消耗一定的时间和内存。
虽然可以弱化对象之间的练习，但是如果过度使用的话，代码反而不太好理解和维护。特别是有多个发布者和订阅者的嵌套到一起的时候，要跟踪一个bug并不是一件轻松的事情。

实现一个通用的发布订阅模式

话不多说，直接上代码，不上代码的技术博客都是耍流氓！

// 定义事件中心类
class MyEvent {handlers = {} // 存放事件 map，发布者，存放订阅者$on(type, fn) {if (!Reflect.has(this.handlers, type)) { // 如果没有定义过该事件，初始化该订阅者列表this.handlers[type] = []}this.handlers[type].push(fn) // 存放订阅的消息}$emit(type, ...params) {if (!Reflect.has(this.handlers, type)) { // 如果没有该事件，抛出错误throw new Error(`未注册该事件${type}`)}this.handlers[type].forEach((fn) => { // 循环事件列表，执行每一个事件，相当于向订阅者发送消息fn(...params)})}$remove(type, fn) {if (!Reflect.has(this.handlers, type)) {throw new Error(`无效事件${type}`)}if (!fn) { // 如果没有传入方法，表示需要将该该类型的所有消息取消订阅return Reflect.deleteProperty(this.handlers, type)} else {const inx = this.handlers[type].findIndex((handler) => handler === fn)if (inx === -1) { // 如果该事件不在事件列表中，则抛出错误throw new Error('无效事件')}this.handlers[type].splice(inx, 1) // 从事件列表中删除该事件if (!this.handlers[type].length) { // 如果该类事件列表中没有事件了，则删除该类事件return Reflect.deleteProperty(this.handlers, type)}}}
}

参考文章：

Javascript中理解发布–订阅模式
JavaScript设计模式与开发实践