手写实现Vue核心功能EventBus事件派发机制_vue手写eventbus

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);
        })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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