基于JS的event-manage事件管理库（一步一步实现）

关于文章

最近在提升个人技能的同时，决定把自己为数不多的沉淀记录下来，让自己理解的更加深刻，同时也欢迎各位看官指出不足之处。

随着node.js的盛行，引领着Javascript上天下地无所不能啊，本人确确实实的一个前端的忠实粉丝，于是乎......不能自拔...node的异步回调机制有效的提高了非密集型程序的高并发、速度快、性能优的需求同时，也饱受各大厂商的青睐，正是node将javascript又一次推向了热潮，于是小白又要埋头苦读，在各位大神和看官指引的道路下前进。

这篇文章是我的第一篇文章，很早就下定决心要记录和分享一些自己对已掌握的知识的一些理解（其实真心觉得将自己学到东西以文章的形式分享给大家，话风通俗易懂，不仅巩固了自己的知识体系，还会 润物无声），可迟迟没有勇气和信心。

这篇文章主要记录一下自己前几天手写的一个兼容node环境、浏览器环境、还支持Vue的...库。event-mange（ npm仓库的名字）。node下的EventEmitter想必大家都很熟悉了，在思考过后决定自己也要产出一个类似的事件管理，不仅能在node下，还可以在浏览器端以 script标签 的方式引入使用，还有CMD、AMD下...于是，本小白开始动工了。

关于事件

在我们使用javascript开发时，我们会经常用到很多事件，如点击、键盘、鼠标等等，这些物理性的事件。而我们今天所说的我称之为事件的，是另一种形式的事件，订阅---发布，又叫做观察者模式，他定义了一对多的依赖关系，当一个对象状态发生改变时，所有依赖于它的对象都会收到通知，而在javascript中，一般习惯性的用事件模型来替代发布---订阅模式。

列举一个生活中的例子来帮助大家理解这一种模式。炎热的夏天，妈妈烧好了饭盛上桌，冒着热气，这时妈妈喊小明吃饭（小明在旁边的屋子里饿着肚子大吉大利晚上吃鸡...），小明出来一看，跟妈妈说，等一会 ‘饭凉了’ 再叫我，太烫了...十分钟后...妈妈喊你 ‘饭凉了’，快来吃饭，而这时小明听到了妈妈的喊话说 ‘饭凉了’，便快速的出来吃完了。这个例子，就是以上介绍的订阅---发布模式。例子中的小明就是订阅者（订阅的是 ‘饭凉了’），而妈妈则是发布者（将信号 ‘饭凉了’ 发布出去）。

使用订阅---发布模式的有着显而易见的优点：订阅者不用每时每刻都询问发布者饭是否凉了，在合适的事件点，发布者会通知这些订阅者，告诉他们饭凉了，他们可以过来吃了。这样就不用把小明和妈妈强耦合在一起，当小明的弟弟妹妹都想在饭凉了在吃饭，只需告诉妈妈一声。就像每个看官肯定都接触过的一种订阅---发布：DOM事件的绑定

document.body.addEventListener('click', function (e) {
     console.log('我执行了...')
}, false)

回归正题：

event-mange 通过订阅-发布模式实现的

一步一步的实现

event-mange 模块的主要方法：

• on：订阅者，添加事件
• emit：发布者， 出发事件
• once： 订阅者，添加只能监听一次之后就失效的事件
• removeListener：删除单个订阅（事件）
• removeAllListener： 删除单个事件类型的订阅或删除全部订阅
• getListenerCount：获得订阅者的数量

event-mange 模块的主要属性：

• MaxEventListNum: 设置单个事件最多订阅者数量（默认为10）

---

基本骨架

首先，我们希望通过 event.on , event.emit 来订阅和发布，通过构造函数来创建一个event实例，而on，emit分别为这个实例的两个方法, 同样的，以上列出的所有主要方法，都是event的对象的原型方法。

function events () {};

// 列举去我们想要实现的event对象的方法

event.prototype.on = function () {};

event.prototype.emit = function () {};

event.prototype.once = function () {};

event.prototype.removeListener = function () {};

event.prototype.removeAllListener = function () {};

event.prototype.getListenerCount = function () {};

似乎丢了什么，没错，是event对象我们上面列出来的MaxEventListNum属性，我们给他补上

function event () {
    //因为MaxEventListNum属性是可以让开发者设置的
    //所以在没有set的时候，我们将其设置为 undefind
    this.MaxEventListNum = this.MaxEventListNum || undefined;

    //如果没有设置set，我们不能让监听数量无限大
    //这样有可能会造成内存溢出
    //所以我们将默认数量设置为10（当然，设置成别的数量也是可以的）
    this.defaultMaxEventListNum = 10;
}

到这里，基本上我们想实现的时间管理模块属性和方法的初态也就差不多了，也就是说，骨架出来了，我们就需要填饱他的代码逻辑，让他变的有血有肉（看似像个生命...）

值得思考的是，骨架我们构建完了，我们要做的是一个订阅--发布模式，我们应该怎么去记住众多的订阅事件呢？ 首先，对于一个订阅，我们需要有一个订阅的类型，也就是topic，针对此topic我们要把所有的订阅此topic的事件都放在一起，对，可以选择Array，初步的构造

event_list: {
    topic1: [fn1, fn2, fn3 ...]
    ...
}

那么接下来我们将存放我们事件的event_list放入代码中完善,作为event的属性

function event () {
    // 这里我们做一个简单的判断，以免一些意外的错误出现
    if(!this.event_list) {
        this.event_list = {};
    }

    this.MaxEventListNum = this.MaxEventListNum || undefined;
    this.defaultMaxEventListNum = 10;
}

---

on 方法实现

event.prototype.on = function () {};

通过分析得出on方法首先应该接收一个订阅的topic，其次是一个当此topic响应后触发的callback方法

event.prototype.on = function (eventName, content) {};

eventName作为事件类型，将其作为event_list的一个属性，所有的事件类型为eventName的监听都push到eventName这个数组里面。

event.prototype.on = function (eventName, content) {
    ...
    var _event, ctx;
    _event = this.event_list;
    // 再次判断event_list是否存在，不存在则重新赋值
    if (!_event) {
      _event = this.event_list = {};
    } else {
      // 获取当前eventName的监听
      ctx = this.event_list[eventName];
    }
    // 判断是否有此监听类型
    // 如果不存在，则表示此事件第一次被监听
    // 将回调函数 content 直接赋值
    if (!ctx) {
      ctx = this.event_list[eventName] = content;
      // 改变订阅者数量
      ctx.ListenerCount = 1;
    } else if (isFunction(ctx)) {
      // 判断此属性是否为函数（是函数则表示已经有且只有一个订阅者）
      // 将此eventName类型由函数转变为数组
      ctx = this.event_list[eventName] = [ctx, content];
      // 此时订阅者数量变为数组长度
      ctx.ListenerCount = ctx.length;
    } else if (isArray(ctx)) {
      // 判断是否为数组，如果是数组则直接push
      ctx.push(content);
      ctx.ListenerCount = ctx.length;
    }
    ...
};

once 方法实现

event.prototype.once = function () {};

once方法对已订阅事件只执行一次，需执行完后立即在event_list中相应的订阅类型属性中删除该订阅的回调函数，其存储过程与on方法几乎一致，同样需要一个订阅类型的topic，以及一个响应事件的回调 content

event.prototype.once = function (eventName, content) {};

在执行完本次事件回调后立即取消注册此订阅，而如果此时同一类型的事件注册了多个监听回调，我们无法准确的删除当前once方法所注册的监听回调，所以通常我们采用的遍历事件监听队列，找到相应的监听回调然后将其删除是行不通的。还好，伟大的javascript语言为我们提供了一个强大的闭包特性，通过闭包的方式来装饰content，包装成一个全新的函数。

events.prototype.once = function (event, content) {
    ...
    // once和on的存储事件回调机制相同
    // dealOnce 函数 包装函数
    this.on(event, dealOnce(this, event, content));
    ...
  }

// 包装函数
function dealOnce(target, type, content) {
    var flag = false;
    // 通过闭包特性（会将函数外部引用保存在作用域中）
    function packageFun() {
      // 当此监听回调被调用时，会先删除此回调方法
      this.removeListener(type, packageFun);
      if (!flag) {
        flag = true;
        // 因为闭包，所以原监听回调还会保留，所以还会执行
        content.apply(target, arguments);
      }
      packageFun.content = content;
    }
    return packageFun;
  }

once的实现其实将我们自己传递的回调函数做了二次封装，再绑定上封装后的函数，封装的函数首先执行了removeListener()移除了回调函数与事件的绑定，然后才执行的回调函数

emit 方法实现

event.prototype.emit = function () {};

emit方法用来发布事件，驱动执行相应的事件监听队列中的监听回调，故我们需要一个事件type的topic

event.prototype.emit = function (eventName[,message][,message1][,...]) {};

当然，发布事件是，也可以像该事件监听者传递参数,数量不限，则会依次传递给所有的监听回调

event.prototype.emit = function (eventName[,message]) {
    var _event, ctx;
    //除第一个参数eventNmae外，其他参数保存在一个数组里
    var args = Array.prototype.slice.call(arguments, 1);
    _event = this.event_list;
    // 检测存储事件队列是否存在
    if (_event) {
      // 如果存在，得到此监听类型
      ctx = this.event_list[eventName];
    }
    // 检测此监听类型的事件队列
    // 不存在则直接返回
    if (!ctx) {
      return false;
    } else if (isFunction(ctx)) {
      // 是番薯则直接执行，并将所有参数传递给此函数（回调函数）
      ctx.apply(this, args);
    } else if (isArray(ctx)) {
      // 是数组则遍历调用
      for (var i = 0; i < ctx.length; i++) {
        ctx[i].apply(this, args);
      }
    }
};

emit从理解程度上来说应该是更容易一些，只是从存储事件的对象中找到相应类型的监听事件队列，然后执行队列中的每一个回调

removeListener 方法实现

event.prototype.removeListener = function () {};

删除某种监听类型的某一个监听回调，显然，我们仍然需要一个事件type，以及一个监听回调，当事件对列中的回调与该回调相同时，则移除

event.prototype.removeListener = function (eventName, content) {};

需要注意的是，如果我们确实存在要移除某个监听事件的回调，在on方法时一定不要使用匿名函数作为回调，这样会导致在removeListener是无法移除，因为在javascript中匿名函数是不相等的。

// 如果需要移除

// 错误
event.on('eatting', function (msg) {

});

// 正确
event.on('eatting', cb);
// 回调
function cb (msg) {
    ...
}

event.prototype.removeListener = function (eventName, content) {
    var _event, ctx, index = 0;
    _event = this.event_list;
    if (!_event) {
      return this;
    } else {
      ctx = this.event_list[eventName];
    }
    if (!ctx) {
      return this;
    }
    // 如果是函数  直接delete
    if (isFunction(ctx)) {
      if (ctx === content) {
        delete _event[eventName];
      }
    } else if (isArray(ctx)) {
      // 如果是数组 遍历
      for (var i = 0; i < ctx.length; i++) {
        if (ctx[i] === content) {
          // 监听回调相等
          // 从该监听回调的index开始，后面的回调依次覆盖掉前面的回调
          // 将最后的回调删除
          // 等价于直接将满足条件的监听回调删除
          this.event_list[eventName].splice(i - index, 1);
          ctx.ListenerCount = ctx.length;
          if (this.event_list[eventName].length === 0) {
            delete this.event_list[eventName]
          }
          index++;
        }
      }
    }
};

removeAllListener 方法实现

event.prototype.removeAllListener = function () {};

此方法有两个用途，即实现当有参数事件类型eventName时，则删除该类型的所有监听（清空此事件的监听回调队列），当没有参数时，则将所有类型的事件监听对垒全部移除，还是比较好理解的直接上代码

event.prototype.removeAllListener = function ([,eventName]) {
    var _event, ctx;
    _event = this.event_list;
    if (!_event) {
      return this;
    }
    ctx = this.event_list[eventName];
    // 判断是否有参数
    if (arguments.length === 0 && (!eventName)) {
      // 无参数
      // 将key 转成 数组  并遍历
      // 依次删除所有的类型监听
      var keys = Object.keys(this.event_list);
      for (var i = 0, key; i < keys.length; i++) {
        key = keys[i];
        delete this.event_list[key];
      }
    }
    // 有参数 直接移除
    if (ctx || isFunction(ctx) || isArray(ctx)) {
      delete this.event_list[eventName];
    } else {
      return this;
    }
};

其主要实现思路大致如上所述，貌似还漏了一些什么，哦，是对于是否超过舰艇数量的最大限制的处理

在on方法中

...
// 检测回调队列是否有maxed属性以及是否为false
if (!ctx.maxed) {
      //只有在是数组的情况下才会做比较
      if (isArray(ctx)) {
        var len = ctx.length;
        if (len > (this.MaxEventListNum ? this.MaxEventListNum : this.defaultMaxEventListNum)) {
        // 当超过最大限制，则会发除警告
          ctx.maxed = true;
          console.warn('events.MaxEventListNum || [ MaxEventListNum ] :The number of subscriptions exceeds the maximum, and if you do not set it, the default value is 10');
        } else {
          ctx.maxed = false;
        }
      }
    }

...

---

现在Vue可谓是红的发紫，没关系，events-manage也可以在Vue中挂在到全局使用哦

events.prototype.install = function (Vue, Option) {
    Vue.prototype.$ev = this;
  }

不用多解释了吧，想必看官都明白应该怎么使用了吧(在Vue中)

关于本库更具体更详细的使用文档，赶紧戳这里

码字不易啊，如果觉得对您有一些帮助，还请给一个大大的赞