浅谈node的事件机制


Posted in Javascript onOctober 09, 2017

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

在nodejs的官方文档中,明确写出了node的一个特性是event-driven(事件驱动),可见其非常重要。查看源码,我们可知其事件机制为用js写的EventEmitter类,写得非常优雅且应用了发布/订阅模式。

通过实现一个简易的、具有发布/订阅模式的事件机制,以此来理清EventEmitter类的实现思路

Publish/Subscribe(发布/订阅模式)

类比

要讲的是一个模式,模式这个词,听起来就很抽象。我们先举个栗子。假设有一家报纸机构,提供晨报、午报、晚报。如果你想要看某种报纸,你需要向报纸机构订阅,等对应的报纸发布出来后,报纸机构就会通知你来拿报纸。

在这个过程中,报纸机构实现了两个功能,一是接受客户的订阅;二是发布不同类型的报纸。发布报纸的时候,订阅该类型报纸的客户就能接收到通知。

这个报纸机构也就是我们要实现的事件机制。

浅谈node的事件机制

目的

从上面的例子可以看出:1.发布报纸;2.将报纸给到客户;这个连续的过程由于报纸机构的存在,变成了可以先订阅,再发布,等到发布就自动送到客户手中,实现了动作时间上的分离。这也是发布/订阅系统的优势。

实现思路

我们有3种报纸,对应3个事件,每个事件发生时要通知客户。对应的数据格式可以如下:

var Event = {
 morning: event1,
 noon: event2,
 night: event3
}

由于每种报纸都可能有不止一个人订阅,那么格式可优化成这样:

var Event = {
 morning: [e11, e12,...],
 noon: [e21, e22],
 night: event3
}

当用户订阅的时候,我们就将其事件添加对应的数组中;当事件发布的时候,就执行相应事件。说白了就是先存储后使用。

具体代码如下:

1.on表示订阅,将事件添加到对应数组中
2.emit表示发布,将对应数组中的数据取出来执行
3.off表示删除无用的事件

var Event = {
 on: function(key, listener) {
  if (!this.__events) {
   this.__events = {}
  }
  if (!this.__events[key]) {
   this.__events[key] = [];
  } 
  if (_indexOf(this.__events[key], listener) == -1 && typeof listener === 'function') {
   this.__events[key].push(listener)
  }
 },
 emit: function(key) {
  if (!this.__events || !this.__events[key]) return 
  //取得每次订阅不同的参数
  var arg = Array.prototype.slice.call(arguments, 1) || [];

  var listeners = this.__events[key];
  var len = listeners.length;

  for (var i=0; i<len; i++) {
   listeners[i].apply(this, arg)
  }
  return this

 },
 off: function(key, listener) {
  if (!key && !listener) {
   this.__events = {}
  }
  if (key && !listener) {
   delete this.__events[key]
  }
  if (key && listener) {
   var listeners = this.__events[key];
   var index = _indexOf(listeners, listener);
   (index > -1) && listeners.splice(index, 1);
  }
  return this
 }
}

var _indexOf = function(array,key){
 if (array === null) return -1
 var i = 0, length = array.length
 for (; i < length; i++) if (array[i] === key) return i
 return -1
}
//调用
Event.on('console1', function(num) {
 console.log(num); // 1
});

Event.emit('console1', 1)

node的EventEmitter

node的EventEmitter基本逻辑和上面提供的例子基本一样,只是更加复杂些。

1.订阅事件on

function _addListener(target, type, listener, prepend) {
 var m;
 var events;
 var existing;

 if (typeof listener !== 'function')
  throw new TypeError('"listener" argument must be a function');

 events = target._events;
 ...
 if (typeof existing === 'function') {
   // Adding the second element, need to change to array.
   existing = events[type] =
    prepend ? [listener, existing] : [existing, listener];
  } else {
   // If we've already got an array, just append.
   if (prepend) {
    existing.unshift(listener);
   } else {
    existing.push(listener);
   }
  }

 return target;
}

EventEmitter.prototype.addListener = function addListener(type, listener) {
 return _addListener(this, type, listener, false);
};

EventEmitter.prototype.on = EventEmitter.prototype.addListener;

2.发布事件

EventEmitter.prototype.emit = function emit(type) {
 ...
 handler = events[type];
 switch (len) {
  // fast cases
  case 1:
   emitNone(handler, isFn, this);
   break;
  case 2:
   emitOne(handler, isFn, this, arguments[1]);
   break;
  case 3:
   emitTwo(handler, isFn, this, arguments[1], arguments[2]);
   break;
  case 4:
   emitThree(handler, isFn, this, arguments[1], arguments[2], arguments[3]);
   break;
  // slower
  default:
   args = new Array(len - 1);
   for (i = 1; i < len; i++)
    args[i - 1] = arguments[i];
   emitMany(handler, isFn, this, args);
 }
}

讲到这里,相信大家已经明白EventEmitter的实现思路。

参考资料

node events.js

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

Javascript 相关文章推荐
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
js表单验证实例讲解
Mar 31 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 #Javascript
ES6中的Promise代码详解
Oct 09 #Javascript
js+html5生成自动排列对话框实例
Oct 09 #Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 #jQuery
详解如何让Express支持async/await
Oct 09 #Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 #Javascript
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jquery中动态效果小结
2010/12/16 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现基于SVM的分类器的方法
2019/07/19 Python
Pandas分组与排序的实现
2019/07/23 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
如何用Python 加密文件
2020/09/10 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
物理课外活动总结
2014/08/27 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2016新年晚会开场白
2015/12/03 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Python获取字典中某个key的value
2022/04/13 Python