EventEmitter3源码分析与学习

背景

事件监听在前端的开发过程中是一个很常见的情况。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——上下文

remov