我们的项目是基于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开发相关的技术文章，欢迎大家阅读！
