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事件派发机制，其实总体实现上，并不是很难。需要一些设计模式的思维。

最后

以上就是坚强小笼包为你收集整理的手写实现Vue核心功能EventBus事件派发机制源码实现ononceofftrigger总结的全部内容，希望文章能够帮你解决手写实现Vue核心功能EventBus事件派发机制源码实现ononceofftrigger总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。