背景

事件监听在前端的开发过程中是一个很常见的情况。DOM上的事件监听方式，让我们看到了通过事件的方式来进行具体的业务逻辑的处理的便捷。

在具体的一些业务场景中，第三方的自定义事件能够在层级较多，函数调用困难以及需要多个地方响应的时候有着其独特的优势——调用方便，避免多层嵌套，降低组件间耦合性。

这篇文章所提到的EventEmitter3，就是一个典型的第三方事件库，能够让我们通过自定义的实践来实现多个函数与组件间的通信。

整体结构图

EventEmitter3的设计较为的简单，具体结构可以看下图所示。

下面我们将按照一般人的正常思路来对这个结构进行介绍。

各部分结构与功能

EE

function EE(fn, context, once) {
    this.fn = fn;
    this.context = context;
    this.once = once || false;
}

从类EE的代码中我们能够很明确的了解到，第一个参数为回调函数，第二个参数为回调函数的上下文，第三个参数是一个once的标志位。由于代码简单，在这里就简单介绍下了。

Prototype属性

events

该方法用于存储eventEmitter的整个事件名称与回调函数的集合，初始值为undefined。

Prototype方法

eventName

• 作用：返回当前已经注册的事件名称的列表
• 参数：无

listeners

• 作用：返回某一个事件名称的所有监听函数
• 参数：event——事件名称，exists——是否只判断存在与否

emit

• 作用：触发某个事件
• 参数：event——事件名，a1~a5——参数1~5

on

• 作用：为某个事件添加一个监听函数
• 参数：event——事件名，fn——回调函数，context——上下文

once

• 作用：类似on,区别在于该函数只会触发一次
• 参数：event——事件名，fn——回调函数，context——上下文

removeListner

• 作用：移除某个事件的监听函数
• 参数：event——事件名，fn——事件监听函数，context——只移除上下文匹配的事件监听函数，once——只移除类型匹配的事件监听函数

removeAllListener

• 作用：移除某个时间的所有监听函数
• 参数：event——事件名

学习思路

下面我们将从添加监听函数， 事件触发与删除监听函数来进行具体的代码分析，从而了解该库的实现思路。

事件对象

具体代码如下所示：

 //一个单一的事件监听函数的单元
 //
 // @param {Function} fn Event handler to be called. 回调函数
 // @param {Mixed} context Context for function execution. 函数执行上下文
 // @param {Boolean} [once=false] Only emit once 是否执行一次的标志位
 // @api private 私有API

function EE(fn, context, once) {
    this.fn = fn;
    this.context = context;
    this.once = once || false;
}

该类为eventEmitter中用于存储事件监听函数的最小类。

添加监听函数

on函数具体代码如下所示：

 // Register a new EventListener for the given event.
 // 注册一个指定的事件的事件监听函数
 //
 // @param {String} event Name of the event. 事件名
 // @param {Function} fn Callback function. 回调函数
 // @param {Mixed} [context=this] The context of the function. 上下文
 // @api public 公有API

 EventEmitter.prototype.on = function on(event, fn, context) {
    var listener = new EE(fn, context || this)
        , evt = prefix ? prefix + event : event;

    if (!this._events) this._events = prefix ? {} : Object.create(null);
    if (!this._events[evt]) {
        this._events[evt] = listener;//第一次存储为一个事件监听对象
    } else {
        if (!this._events[evt].fn) {//第三次及以后则直接向对象数组中添加事件监听对象
            this._events[evt].push(listener);
        } else {//第二次将存储的对象与新对象转换为事件监听对象数组
            this._events[evt] = [
                this._events[evt], listener
            ];
        }
    }

    return this;
}

当我们向事件E添加函数F时，会调用on方法，此时on方法会检查eventEmitter中prototype属性events的E属性。

• 当这个属性为undefined时，直接将该函数所在的事件对象赋值给evt属性。
• 当该属性当前值为一个对象且其函数fn不等于函数F时，则会将其转换为一个包含这两个事件对象的事件对象数组。
• 当这个属性已经是一个对象数组时，则直接通过push方法向数组中添加对象。

prefix是用来判断Object.create()方法是否存在，如果存在则直接调用该方法来创建属性，否则通过在属性前添加~来避免覆盖原有属性。

once的函数实现与on函数基本一致，所以在此就不再进行分析。

触发监听函数

emit函数代码如下所示：

// Emit an event to all registered event listeners.
// 触发已经注册的事件监听函数
//
// @param {String} event The name of the event. 事件名
// @returns {Boolean} Indication if we've emitted an event. 如果触发事件成功,则返回true,否则返回false
// @api public 公有API

EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
    var evt = prefix ? prefix + event : event;

    if (!this._events || !this._events[evt]) return false;

    var listeners = this._events[evt]
        , len = arguments.length
        , args
        , i;

    if ('function' === typeof listeners.fn) {
        if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);

        switch(len) {
            case 1:
                return listeners.fn.call(listeners.context), true;
            case 2:
                return listeners.fn.call(listeners.context, a1), true;
            case 3:
                return listeners.fn.call(listeners.context, a1, a2), true;
            case 4:
                return listeners.fn.call(listeners.context, a1, a2, a3), true;
            case 5:
                return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
            case 6:
                return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
        }

        for(i = 1, args = new Array(len - 1); i < len; i++) {
            args[i - 1] = arguments[i];
        }

        listeners.fn.apply(listeners.context, args);
    } else {
        //由于篇幅原因省略E属性为数组时通过循环调用来实现事件触发的过程
    }

    return true;
};

当我们触发事件E时，我们只需要调用emit方法。该方法会自动检索事件E中所有的事件监听对象，触发所有的事件监听函数，同时移除掉通过once添加，只需要触发一次的事件监听函数。

移除事件监听函数

removeListener函数代码如下：

// Remove event listeners.
// 移除事件监听函数
//
// @param {String} event The event we want to remove. 需要被移除的事件名
// @param {Function} fn The listener that we need to find. 需要被移除的事件监听函数
// @param {Mixed} context Only remove listeners matching this context. 只移除匹配该参数指定的上下文的监听函数
// @param {Boolean} once Only remove once listeners. 只移除匹配该参数指定的once属性的监听函数
// @api public 公共API

EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
    var evt = prefix ? prefix + event : event;

    if (!this._events || !this._events[evt]) return this;

    var listeners = this._events[evt]
        , events = [];

    if (fn) {
        if (listeners.fn) {
            if (
                listeners.fn !== fn
                || (once && !listeners.once)
                || (context && listeners.context !== context)
            ) {
                events.push(listeners);
            }
        } else {
            //由于篇幅原因省去便利listeners属性查找函数删除的代码
        }
    }

    //
    // Reset the array, or remove it completely if we have no more listeners.
    //
    if (events.length) {
        this._events[evt] = events.length === 1 ? events[0] : events;
    } else {
        delete this._events[evt];
    }

    return this;
};

removeListener函数实现较为简单。当我们需要移除事件E的某个函数时，它使用一个event属性来保存不需要被移除的事件监听对象，然后便利整个事件监听数组（单个时为对象），并且最后将event属性的值赋值给E属性从而覆盖掉原有的属性，达到删除的目的。

其他

该库中还有一些其他的函数，由于对整个库的理解不产生太大影响，因此没有在此进行讲解，有需要的可以前往我的github仓库进行查看。

缺点

eventEmitter的代码虽然结构清晰，但是仍然存在一些问题。例如on和once方法的实现中，只有一个属性不同，其余代码都一模一样，其实可以抽出一个特定的函数来进行处理，通过属性来进行区分调用即可。

同时，在同一个函数例如emit中，也存在大量的重复代码，可以进行进一步的抽象和整理，使得代码更加简单。

总结

eventEmitter第三方事件库从实现上来看较为简单，并且结构清晰容易阅读，推荐有兴趣的可以花大约一个小时的时间来学习下。

附录

本人github地址——eventEmitter3
官方github地址