Vue中有一个非常核心的功能，就是EventBus事件派发机制，这种机制在前端很多领域都有应用，甚至在其它语言中也是非常重要的内容。在Vue3中框架内已经移除了这种机制，官方的回答大概意思是，这种东西应该用户自己实现，不应该由框架提供。所以我们试着实现一下

今天我们主要实现on,once,off,trigger这四个方法

源码实现

class eventBus {constructor () {this.eventMap = {};}addEventListener (eventName, fn, isOnce) {const taskObj = { fn, isOnce };if (!this.eventMap[eventName]) {this.eventMap[eventName] = [taskObj];} else {this.eventMap[eventName].push(taskObj);}}on (eventName, fn) {this.addEventListener(eventName, fn, false);}once (eventName, fn) {this.addEventListener(eventName, fn, true);}off (eventName) {this.eventMap[eventName] = [];}trigger (eventName) {const tasks = this.eventMap[eventName];const onceTasks = [];tasks && tasks.forEach((item, index) => {const { fn, isOnce } = item;fn && fn();if (isOnce) {onceTasks.push(index);}})onceTasks.forEach((index) => {this.eventMap[eventName].splice(index, 1);})}
}

on

首先是on方法，on方法的主要作用就是挂载事件。提供事件的名字和事件本身。这里挂载事件的操作，我们抽离成一个addEventListener方法来进行挂载。挂载过程也比较简单，就是判断eventMap这个总对象上是否存在这个事件的名字，存在就push进去，不存在就创建。

isOnce参数是为了配合实现once方法，因为on和once都复用addEventListener。

once

once跟on其实非常非常类似，最大的区别是once挂载的事件只触发一次。on挂载的事件如果不主动移除，会一直存在。once方法同样需要提供事件的名字和事件本身。

off

off是移除事件的方法，比如我用on挂载了某个事件之后，因为一些原因要移除，就可以用off方法，只需要提供事件的名字即可

trigger

trigger是触发事件的方法，需要提供事件的名字。会执行这个事件名字下挂载的所有事件。我们需要解构出isOnce属性来判断执行完之后是否需要移除这个事件。

总结

EventBus事件派发机制，其实总体实现上，并不是很难。需要一些设计模式的思维。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！