EventEmitter简介

EventEmitter是Node.js的内置模块events提供的一个类,它是Node事件流的核心,EventEmitter是服务端的东西,
前端已经有event-emitter的npm库
 
高级浏览器也有原生提供的EventTarget这种实现事件监听和触发的API
 
但是它们和Node.js的事件API都有或多或少的区别,今天我们就来实现一个前端版本的EventEmitter
我本章demo的github地址如下
 

API介绍

我们要实现的API有:
  • on(event, listener):为指定事件注册一个监听器,接受一个字符串 event 和一个回调函数。
  • emit(event, [arg1], [arg2]): 按监听器的顺序执行执行每个监听器
  • addListener(event, listener):on的同名函数(alias)
  • once(event, listener): 和on类似,但只触发一次,随后便解除事件监听
  • removeListener(event, listener): 移除指定事件的某个监听回调
  • removeAllListeners([event]):移除指定事件的所有监听回调
  • setMaxListeners(n):用于提高监听器的默认限制的数量。(默认10监听回调个产生警告)
  • listeners(event): 返回指定事件的监听器数组。
为了保证兼容性和简单性,下面的编码全部基于ES5语法实现
 

构造函数

首先我们需要写一个EventEmitter构造函数,给它设置两个属性listeners和maxListener
function EventEmitter() {
this.listeners = {};
this.maxListener = 10;
}

listeners用于存放事件监听器函数,结构如下:

{
"event1": [f1,f2,f3],
"event2": [f4,f5],
...
}

而maxListener 是设置的某个事件能够添加的监听器的最大数量,超过这个值,需要在控制台输出警告,但不会报错阻止。按照Node的设计,这个值能够通过setMaxListeners动态调整

on方法

  1. 判断该事件的监听器数量是否已超限,超限则报警告
  2. 判断该事件监听器数组是否初始化,若未初始化,则将listeners[event]初始化为数组,并加入监听器cb
  3. 若监听器数组已经被初始化,则判断数组中是否已存在cb,不存在则添加,已存在则不做操作。
  4. 指定addListener等于on方法
EventEmitter.prototype.on = function (event, cb) {
var listeners = this.listeners;
if (listeners[event] && listeners[event].length >= this.maxListener) {
throw console.error('监听器的最大数量是%d,您已超出限制', this.maxListener)
}
if (listeners[event] instanceof Array) {
if (listeners[event].indexOf(cb) === -1) {
listeners[event].push(cb);
}
} else {
listeners[event] = [].concat(cb);
}
} EventEmitter.prototype.addListener = EventEmitter.prototype.on;

emit方法

  1. 通过Array.prototype.slice.call(arguments)取出方法的参数列表args,(因为考虑简单性和兼容性所以采用ES5的冗长编码方式)
  2. 调用args.shift踢掉数组第一个参数即event,留下来的这些是要传给监听器的
  3. 遍历监听器,通过apply方法把上面得到的args参数传进去
EventEmitter.prototype.emit = function (event) {
var args = Array.prototype.slice.call(arguments);
args.shift();
this.listeners[event].forEach(cb => {
cb.apply(null, args);
});
}

removeListener方法

  1. 通过indexOf确定监听器回调在数组listeners[event]中的位置
  2. 通过splice(i,1)删除之
EventEmitter.prototype.removeListener = function (event, listener) {
var listeners = this.listeners;
var arr = listeners[event] || [];
var i = arr.indexOf(listener);
if (i >= 0) {
listeners[event].splice(i, 1);
}
}

once方法

once方法是on方法和removeListener方法的结合:用on方法监听,在回调结束的最后位置,通过removeListener删掉监听函数自身
EventEmitter.prototype.once = function (event, listener) {
var self = this;
function fn() {
var args = Array.prototype.slice.call(arguments);
listener.apply(null, args);
self.removeListener(event, fn);
}
this.on(event, fn)
}

removeAllListener方法

清空listeners[event]数组
EventEmitter.prototype.removeAllListener = function (event) {
this.listeners[event] = [];
}

setMaxListeners方法和listeners方法

EventEmitter.prototype.listeners = function (event) {
return this.listeners[event];
} EventEmitter.prototype.setMaxListeners = function (num) {
this.maxListener = num;
}

Github地址

https://github.com/penghuwan/event-emitter

EventEmitter的前端实现的更多相关文章

  1. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  2. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  3. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  4. Gulp vs Grunt 前端构建工具对比

    Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...

  5. 前端工程的构建工具对比 Gulp vs Grunt

    1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...

  6. 【前端】Angular2 Ionic2 学习记录

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html 一.建立项目 ionic start ProductName super ...

  7. BAT 前端开发面试 —— 吐血总结

    更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了腾讯和阿里的内推及百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...

  8. 如何才能成为一个合格的web前端工程师

    转载原文地址:https://juejin.im/post/5cc1da82f265da036023b628 开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快 ...

  9. BAT 前端开发面经 —— 吐血总结

    更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...

随机推荐

  1. 分享几个能用的editplus注册码/2018年序列号

    注册名:host1991 序列号:14F50-CD5C8-E13DA-51100-BAFE6     注册名:360xw    注册码:93A52-85B80-A3308-BF130-40412   ...

  2. SSAS 多维/表格设计模型--事实表与维表的关联

    表格设计模型中,同多维设计模型相似, 维表和事实表相互独立,通过关系数据库中的外键来联系,互相关联构成一个统一的架构. DB中外键是需要唯一性约束的,即A表某列建立主键或者唯一键后,B表才可以引用为外 ...

  3. 什么是常量?变量? if语句介绍

    1.python 的历史 2004 年 Django 的产生 phyton2与 python3 的区别 Python2:源码不统一,有重复的代码功能 Python3:源码统一,没有有重复的代码功能 2 ...

  4. vue-cli安装搭建初始项目

    vue-cli脚手架 前提:node + npm 安装好 一.介绍 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:帮助我们检 ...

  5. Excel催化剂开源第50波-Excel与PowerBIDeskTop互通互联之第四篇

    答应过的全盘分享,也必承诺到底,此篇PowerBI功能分享的最后一篇,讲述如何导出数据模型的元数据,笔者定义其为模型的数据字典. 此篇对应功能实现出自:第6波-导出PowerbiDesktop模型数据 ...

  6. [leetcode] #239 Sliding Window Maximum (Hard)

    原题链接 题意: 给定一个数组数字,有一个大小为k的滑动窗口,它从数组的最左边移动到最右边.你只能在窗口看到k个数字.每次滑动窗口向右移动一个位置. 记录每一次窗口内的最大值,返回记录的值. 思路: ...

  7. 前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台

    基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约.大气,减少初学者或开发者不必要的工作量.后台维护采用的springboot+shiro的方式,为广大爱好者提供展示 ...

  8. linux初学者-输出输入管理

      1.输出重定向 在linux中,因为用户的权限不同,所以访问某些文件或者目录会被拒绝而形成错误输出,这些错误的输出也会显示出来.一般正确输出的编号为1,错误输出的编号为2.如下图,在普通用户stu ...

  9. Java基础之分支结构循环结构

    流程控制语句if(分支结构) 流程控制:流程就是指代码运行过程.控制就是说什么场景可以执行,什么场景不能执行. 1.if语句第一种形式 格式:if(表达式){      执行的语句:     } 2. ...

  10. Floyd—Warshall算法

    我们用DP来求解任意两点间的最短路问题 首先定义状态:d[k][i][k]表示使用顶点1~k,i,j的情况下,i到j的最短路径 (d[0][i][j]表示只使用i和j,因此d[0][i][j] = c ...