【前端面试题】实现一个EventEmitter

什么是EventEmitter？EventEmitter类似于Vue中的事件总线。有on、off、emit、once方法。接下来以Vue事件总线的方式进行解释，方便理解

首先，我们使用Class搭建起这个函数（普通函数也可以）

class EventEmitter {
   
   
    constructor() {
   
   
        // 初始化一个事件中心
        this.emitter = {
   
   };
        // 事件中心保存的内容是下面这样的，因为可以同时监听多次相同的事件
        // this.emitter = {
   
   
            // 'eventName1': [callback1, callback2, ...],
            // 'eventName2': [callback1, callback2, ...],
        // };
    }
}

首先实现on函数。on函数接收2个参数，第一个参数是事件名称，第二个参数的执行的回调函数。当我们使用emit派发事件时，on函数监听到就会执行相应的回调函数。

on(name, callback) {
   
   
    // 获取事件中心所存储的对应名称的事件
    const callbacks = this.emitter[name];
    // 如果保存过内容，就接着往里面添加，否则就当前callback就是第一个
    if (callbacks) {
   
   
        this.emitter[name].push(callback);
    } else {
   
   
        this.emitter[name] = [callback];
    }
}

监听的on函数有了，接下来实现派发事件的emit函数。emit函数接收2个参数，第一个参数是事件名称，第二个参数是要传递的参数。

emit(name, ...args) {
   
   
    // 获取事件中心所存储的对应名称的事件
    const callbacks = this.emitter[name];
    // 如果存在事件，就循环将监听的事件都触发，并且将参数传递过去
    if (callbacks) {
   
   
        callbacks.forEach(callback => {
   
   
            callback.apply(this, args