详解如何模拟实现node中的Events模块(通俗易懂版)


Posted in Javascript onApril 15, 2019

Nodejs 的大部分核心 API 都是基于异步事件驱动设计的,事件驱动核心是通过 node 中 Events 对象来实现事件的发送和监听回调绑定,我们常用的 stream 模块也是依赖于 Events 模块是来实现数据流之间的回调通知,如在数据到来时触发 data 事件,流对象为可读状态触发 readable 事件,当数据读写完毕后发送 end 事件。

既然 Events 模块如此重要,我们有必要来学习一下 Events 模块的基本使用,以及如何模拟实现 Events 模块中常用的 api

一、Events 模块的基本使用以及简单实现

首先我们了解一下 Events 模块的基本用法,其实 Events 模块本质上是观察者模式的实现,所谓观察者模式就是:

它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知

观察者模式有对应的观察者以及被观察的对象,在 Events 模块中,对应的实现就是 on 和 emit 函数

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('嗨', (str) => {
 console.log(str);
});
myEmitter.emit('嗨','你好');

从上述的使用中,我们可以知道 on 是用来监听事件的发生,而 emit 是用来触发事件的发生,一旦 emit 触发了事件,on 就会被通知到,从而执行对应的回调函数。

有了这个实例,我们可以思考下如何实现这个 EventEmitter 类。

思路:当我们执行 on 函数时,我们可以将回调函数保存起来,等到 emit 触发了事件时,将回调函数拿出来执行,那么就可以实现了事件的监听以及订阅了。

class EventEmitter{
 constructor(){
  #事件监听函数保存的地方
  this.events={};
 }
 on(eventName,listener){
  if (this.events[eventName]) {
   this.events[eventName].push(listener);
  } else {
   #如果没有保存过,将回调函数保存为数组
   this.events[eventName] = [listener];
  }
 }
 emit(eventName){
  #emit触发事件,把回调函数拉出来执行
  this.events[eventName] && this.events[eventName].forEach(listener => listener())
 }
}

上述就实现了一个简单的 EventEmitter 类,下面来实例一下:

let event = new EventEmitter();
event.on('嗨',function(){
 console.log('你好');
});
event.emit('嗨');
#输出:你好

完善:我们注意到在原生的 EventEmitter 类中,emit 是可以传递参数到我们的回调函数中,那么我们实现的类也应该支持传递参数。我们对 emit 进行如下更改

emit(eventName,...rest){
 #emit触发事件,把回调函数拉出来执行
 this.events[eventName] && this.events[eventName].forEach(listener => listener.apply(this,rest))
}

完善之后,重新实例化,如下:

let event = new EventEmitter();
event.on('嗨',function(str){
 console.log(str);
});
event.emit('嗨','你好');
#输出:你好

二、Events 模块中常用的 api

Events 模块中除了 on、emit 函数之外,还包含了很多常用的 api,我们一一来介绍几个实用的 api

API名称 API方法描述
addListener(eventName, listener) on(eventName, listener)别名,为指定事件添加一个监听器到监听器数组的尾部
removeListener(eventName, listener) 从名为 eventName 的事件的监听器数组中移除指定的 listener
removeAllListeners(eventName, listener) 移除全部监听器或指定的 eventName 事件的监听器
once(eventName, listener) 添加单次监听器 listener 到名为 eventName 的事件
listeners(eventName) 返回名为 eventName 的事件的监听器数组的副本
setMaxListeners(n) 可以为指定的 EventEmitter 实例修改监听器数量限制

1. addListener 与 on 方法使用与实现

在 Events 模块中,addListener 与 on 方法的使用是完成相同的,只是名字不同,我们可以通过原型来给两个函数建立相等关联

EventEmitter.prototype.addListener=EventEmitter.prototype.on

2. removeListener 与 off 方法使用与实现

removeListener 方法可以从指定名字的监听器数组中移除指定的 listener,这样的话,当再次 emit 事件的时候,不会触发 on 绑定的回调函数,如下:

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
let callback = (str) => {
 console.log(str);
}
myEmitter.on('嗨', callback);
myEmitter.emit('嗨','你好');#输出:你好
myEmitter.removeListener('嗨',callback);
myEmitter.emit('嗨','你好');#无输出

实现思路:我们只要在执行 removeListener 函数的时候,将先前保存的回调函数去除掉即可

removeListener (eventName,listener) {
 #保证回调函数数组存在,同时去除指定的listener
 this.events[eventName] && this.events[eventName] = this.events[eventName].filter(l => l != listener);
}

同时 removeListener 与 off 方法也是功能完全相同,只是命名不同,因此可以通过如下方法赋值:

EventEmitter.prototype.removeListener=EventEmitter.prototype.off

3. removeAllListeners 方法使用与实现

removeAllListeners 移除全部监听器或指定的 eventName 事件的监听器,其实 removeAllListeners 就包含了 removeListener 的功能,只是 removeListener 只能指定特定的监听器,removeAllListeners 可以移除全部监听器。

实现思路:在执行 removeAllListeners,将所有的回调函数都给去除即可

removeAllListeners (eventName) {
 #移除全部监听器
 delete this.events[eventName]
}

4. once 方法使用与实现

once 方法的描述是添加单次监听器 listener 到名为 eventName 的事件,其实就是通过 once 添加的监听器,只能执行一次,执行一次之后就会被销毁,不能再次执行

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.once('嗨', (str) => {
 console.log(str);
});
myEmitter.emit('嗨','你好');
myEmitter.emit('嗨','你好');
myEmitter.emit('嗨','你好'); #只能输出一次你好

实现思路:当 once 监听的事件回调函数执行之后,通过 removeListener 将事件监听器给解绑掉,那么事件再次被 emit 的时候,就不会再次执行回调,这样就能保证事件回调只能执行一次

once (eventName, listener) {
 #重新改变监听回调函数,使其执行之后可以被销毁
 let reListener = (...rest) => {
  listener.apply(this,rest);
  #执行完之后解除事件绑定
  this.removeListener(type,wrapper);
 }
 this.on(eventName,reListener);
}

5. listeners 方法使用与实现

listeners 方法返回名为 eventName 的事件的监听器数组的副本,其实就是获取 eventName 中所有的回调函数,这个实现起来很容易,就不多赘述了,代码如下:

listeners (eventName) {
 return this.events[eventName]
}

6. setMaxListeners 方法使用与实现

默认情况下,如果为特定事件添加了超过 10 个监听器,则 EventEmitter 会打印一个警告。 这有助于发现内存泄露, 但是,并不是所有的事件都要限制 10 个监听器。 emitter.setMaxListeners() 方法可以为指定的 EventEmitter 实例修改限制。 值设为 Infinity(或 0)表示不限制监听器的数量。

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
let callback = (str) => {
 console.log(str);
}
for (let i = 0; i <= 11; i++) {
 myEmitter.on('嗨', callback);
}
myEmitter.emit('嗨', '你好');

输入结果如图:

详解如何模拟实现node中的Events模块(通俗易懂版)

实现思路:

我们先将特定事件的监听器最大设置为常量10

constructor(){
 #事件监听函数保存的地方
 this.events={};
 #最大监听器数量
 this._maxListeners = 10;
}

然后在我们的 on 函数中,对这个监听器的数量进行判断,从而作出提示

on(eventName,listener){
 if (this.events[eventName]) {
  this.events[eventName].push(listener);
  #如果超过最大限度,以及不为0,则作出内存泄漏提示
  if (this._maxListeners != 0 && this.events[type].length >= this._maxListeners) {
   console.error('超过最大的监听数量可能会导致内存泄漏');
  }
 } else {
  #如果没有保存过,将回调函数保存为数组
  this.events[eventName] = [listener];
 }
}

我们也支持对 _maxListeners 变量根据用户的输入进行更改,即我们的 setMaxListeners() 函数

setMaxListeners(MaxListeners) {
 this._maxListeners = MaxListeners
}

三、总结

本文从 node 的 Events 模块出发,然后去介绍了 Events 模块常用 API 的使用,从中通过一步一步简易去思考这些 API 使用的内部原理,简易的实现了这些 API,希望大家看完文章之后,能对 Events 模块有进一步的理解。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript事件串连执行多个处理过程的方法
Mar 09 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
小程序数据通信方法大全(推荐)
Apr 15 #Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 #Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
You might like
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python实现的希尔排序算法实例
2015/07/01 Python
使用python进行拆分大文件的方法
2018/12/10 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
英语生日邀请函
2014/01/23 职场文书
贷款委托书范本
2014/04/08 职场文书
2016新年慰问信范文
2015/03/25 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技