EventEmitter的前端实现
EventEmitter简介
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): 返回指定事件的监听器数组。
构造函数
function EventEmitter() {
this.listeners = {};
this.maxListener = 10;
}
listeners用于存放事件监听器函数,结构如下:
{
"event1": [f1,f2,f3],
"event2": [f4,f5],
...
}
而maxListener 是设置的某个事件能够添加的监听器的最大数量,超过这个值,需要在控制台输出警告,但不会报错阻止。按照Node的设计,这个值能够通过setMaxListeners动态调整
on方法
- 判断该事件的监听器数量是否已超限,超限则报警告
- 判断该事件监听器数组是否初始化,若未初始化,则将listeners[event]初始化为数组,并加入监听器cb
- 若监听器数组已经被初始化,则判断数组中是否已存在cb,不存在则添加,已存在则不做操作。
- 指定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方法
- 通过Array.prototype.slice.call(arguments)取出方法的参数列表args,(因为考虑简单性和兼容性所以采用ES5的冗长编码方式)
- 调用args.shift踢掉数组第一个参数即event,留下来的这些是要传给监听器的
- 遍历监听器,通过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方法
- 通过indexOf确定监听器回调在数组listeners[event]中的位置
- 通过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方法
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方法
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地址
EventEmitter的前端实现的更多相关文章
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- Gulp vs Grunt 前端构建工具对比
Gulp vs Grunt 前端工程的构建工具对比 1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Jav ...
- 前端工程的构建工具对比 Gulp vs Grunt
1. Grunt -> Gulp 早些年提到构建工具,难免会让人联想到历史比较悠久的Make,Ant,以及后来为了更方便的构建结构类似的Java项目而出现的Maven.Node催生了一批自动化工 ...
- 【前端】Angular2 Ionic2 学习记录
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/angular2_ionic2.html 一.建立项目 ionic start ProductName super ...
- BAT 前端开发面试 —— 吐血总结
更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了腾讯和阿里的内推及百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...
- 如何才能成为一个合格的web前端工程师
转载原文地址:https://juejin.im/post/5cc1da82f265da036023b628 开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快 ...
- BAT 前端开发面经 —— 吐血总结
更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘.总结提升,二是希望给大家一些参考 其他面试及基础相关可以参考其他博文: ...
随机推荐
- 分享几个能用的editplus注册码/2018年序列号
注册名:host1991 序列号:14F50-CD5C8-E13DA-51100-BAFE6 注册名:360xw 注册码:93A52-85B80-A3308-BF130-40412 ...
- SSAS 多维/表格设计模型--事实表与维表的关联
表格设计模型中,同多维设计模型相似, 维表和事实表相互独立,通过关系数据库中的外键来联系,互相关联构成一个统一的架构. DB中外键是需要唯一性约束的,即A表某列建立主键或者唯一键后,B表才可以引用为外 ...
- 什么是常量?变量? if语句介绍
1.python 的历史 2004 年 Django 的产生 phyton2与 python3 的区别 Python2:源码不统一,有重复的代码功能 Python3:源码统一,没有有重复的代码功能 2 ...
- vue-cli安装搭建初始项目
vue-cli脚手架 前提:node + npm 安装好 一.介绍 vue-cli: Vue + ESLint + webpack + iview + ES6 Vue:主要框架ESLint:帮助我们检 ...
- Excel催化剂开源第50波-Excel与PowerBIDeskTop互通互联之第四篇
答应过的全盘分享,也必承诺到底,此篇PowerBI功能分享的最后一篇,讲述如何导出数据模型的元数据,笔者定义其为模型的数据字典. 此篇对应功能实现出自:第6波-导出PowerbiDesktop模型数据 ...
- [leetcode] #239 Sliding Window Maximum (Hard)
原题链接 题意: 给定一个数组数字,有一个大小为k的滑动窗口,它从数组的最左边移动到最右边.你只能在窗口看到k个数字.每次滑动窗口向右移动一个位置. 记录每一次窗口内的最大值,返回记录的值. 思路: ...
- 前端基于vue,后台采用springboot+shiro的方式搭建的一个移动端商品展示平台
基于vue实现的移动端商品展示页,可以web-view的方式嵌入到小程序中,布局简约.大气,减少初学者或开发者不必要的工作量.后台维护采用的springboot+shiro的方式,为广大爱好者提供展示 ...
- linux初学者-输出输入管理
1.输出重定向 在linux中,因为用户的权限不同,所以访问某些文件或者目录会被拒绝而形成错误输出,这些错误的输出也会显示出来.一般正确输出的编号为1,错误输出的编号为2.如下图,在普通用户stu ...
- Java基础之分支结构循环结构
流程控制语句if(分支结构) 流程控制:流程就是指代码运行过程.控制就是说什么场景可以执行,什么场景不能执行. 1.if语句第一种形式 格式:if(表达式){ 执行的语句: } 2. ...
- Floyd—Warshall算法
我们用DP来求解任意两点间的最短路问题 首先定义状态:d[k][i][k]表示使用顶点1~k,i,j的情况下,i到j的最短路径 (d[0][i][j]表示只使用i和j,因此d[0][i][j] = c ...