如何优雅地使用JS自定义一个全局事件总线(eventBus)?

我们的项目是基于Vue3的，众所周知，Vue3中移除了全局事件总线相关的API，那么，如果我们需要的话，该如何手动实现一个呢？今天，我教大家手写一个eventBus。

首先，我们先用文档注释定义一个类型 Fn，编写良好的文档注释，可以使我们像写TypeScript一样写JavaScript。

/** @typedef {Function & { once: boolean }} Fn */

事件总线通常至少需要4个API方法，及一个对象用于存储事件名称和回调函数。首先，我们先定义存储事件和回调的对象events。

export default {
    /** @type {Object<string, Fn[]} 存储事件和回调的对象字面量 */
 		events: {}
}

接下来，我们创建emit方法，用于发射事件。该方法可接收无限个参数，第一个参数为事件名，后面的所有参数为事件携带的数据。我们使用es6展开运算符将剩余参数以args数组接收。我们根据事件名获取到该事件名对应的回调函数数组，如果存在该数组，那么遍历它，调用所有的回调函数，如果该函数的once属性的值为true，那么我们取消对该事件的监听。

export default {
  	... ...,
    emit (evt, ...args) {
      const fns = this.events[evt]
      fns && fns.forEach(fn => {
        fn(...args)
        fn.once && this.off(evt, fn)
      })
    }
}

然后，我们创建on方法，用于监听事件。该方法接收2个参数，第一个参数为事件名，第二个参数为回调函数。该方法非常简单，就是将fn添加进events中evt对应的回调函数数组中。

export default {
  	... ...,
    on (evt, fn) {
      this.events[evt] = [...(this.events[evt] || []), fn]
    }
}

现在，我们创建once方法，用于仅监听一次事件。该方法与on方法接收同样的参数，唯一的不同是，我们首先将fn的once属性设置为true，用于标识该回调函数仅被触发一次，然后，调用on方法。

export default {
  	... ...,
    once (evt, /** @type {Fn} */ fn) {
      fn.once = true
      this.on(evt, fn)
    }
}

最后，我们创建off方法，用于注销事件监听，该方法与on接收同样的参数，我们首先获取到events中evt事件名对应的回调函数数组fns，如果数组存在，我们获取fn在fns中的索引，如果存在，则通过移除该回调函数。

export default {
  	... ...,
    off (evt, fn) {
      const fns = this.events[evt]
      if (fns) {
        const index = fns.indexOf(fn)
        index > -1 && fns.splice(index, 1)
      }
    }
}

感谢阅读！到此已经讲解完毕，自定义全局事件总线是不是很简单？大家有什么不明之处，或有更好的实现方案，欢迎评论区见！

后续有时间的话，我会分享更多Web开发相关的技术文章，欢迎大家阅读！