使用js的class类简单的实现一个事件监听机制,不同于浏览器中的时间绑定与监听,类似于node中的时间监听,并且会在接下来的文章中去根据自己的理解去写一下Event模块中的原理。

Node.js使用了一个事件驱动、非阻塞式I/O的模型,使其轻量又高效。并且Node中的大量模块都使用了Event机制,因此可以说是整个Node中最重要的模块之一。

实例:

    let event = new eventEmitter();
event.on('someType',function(){ });
event.emit('someType');

依据上述例子,手动触发一个类型的事件,调用监听的回调函数,可以先来实现一个最为简单的小例子,例如下放代码:

class eventEmitter {
constructor() {
this.callEvent = '';
}
on(eventType, callback) {
this.callEvent = callback;
};
emit(eventType) {
this.callEvent();
};
}
let event = new eventEmitter();
event.on('click', function () {
console.log('click')
});
event.emit('click');

上述实现的代码,能够简单的实现,当我们执行emit()方法时,去执行原本on()中传入的回调函数。

我们知道node中的Event模块是一个简单的事件监听模式的实现。Event模块中只提供了一个对象EventEmitter,EventEmitter的核心就是事件监听与事件触发的监听功能的封装。

EventEmitter可以让我们注册一个或者多个函数作为listeners,在特定的事件触发时被调用。我们去监听的函数就是listeners。当然,我们可以注册多个监听事件,所以需要一个map结构来存储监听事件和回调函数的对应关系。

在EventEmitter类中,已键值对的方式来存储事件名和对应的监听器。

首先根据上边的类来实现我们on事件,先来个events来作为存储的键值对,每次传入的值为事件类型和回调函数,代码简单如下:

    EventEmitter.prototype.on = function on(type,listener){
return _on(this,type,listener);
}; function _on(target,type,listener){
var m;
var events;
var existing;
if(typeof listener !== 'function'){
throw new Error("监听者必须是一个函数");
}
//获取到对象上的监听事件键值对
events = target._events;
if(!events){
//如果没有键值对,则重新自定义
events = target._events = {};
target._eventsCount = 0;
}else{
//获取原来键值对中的listener事件
existing = events[type];
} if(!existing) {
//如果原本的事件监听的键值对中没有该type的该监听事件
//则在events中存放该type和该监听事件的键值对
existing = events[type] = listener;
//并且当前内存中存放的监听事件加1
++target._eventsCount;
} return target;
}

现在on事件可以使用了,我们先不去思考最大监听数的限制还有键值对的初始化不正确等其他因素,这些可以放在之后进行优化,接下来简单的去实现EventEmitter中的emit事件

EventEmitter.prototype.emit = function emit(type){
return _emit(this,type);
}; function _emit(target,type){
var events,exiting,handler;
if(!type){
throw new Error('触发的事件不能为空');
}
//获取到对象上的监听事件键值对
events = target._events;
//根据type获取到监听事件
handler = events[type];
if(!handler){
return false;
}
handler();
}

同样的emit事件的实现是简单的从键值对中根据type获取到监听事件去执行。这里还没有考虑传入多个参数的情况。

根据上边的简单实现,我们可以来进行下尝试,比之前的版本相比,我们可以监听多个事件,去触发多个回调函数了。

event.on('click', function () {
console.log('click')
}); event.on('click1',function (){
console.log('click11');
}); event.emit('click');
//输出click event.emit('click1');
//输出click11 console.log(event._events);
//输入{click: [Function],click1:[Function]}

这里简单的实现了多个事件注册,多个事件触发的EventEmitter,接下来会继续进行设置监听个数、以及触发时传入多个参数的剖析。

参考:[https://github.com/nodejs/node/blob/v6.0.0/lib/events.js]

简单剖析Node中的事件监听机制(一)的更多相关文章

  1. Java中的事件监听机制

    鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...

  2. Java 中的事件监听机制

    看项目代码时遇到了好多事件监听机制相关的代码.现学习一下: java事件机制包含三个部分:事件.事件监听器.事件源. 1.事件:继承自java.util.EventObject类,开发人员自己定义. ...

  3. jQuery中的事件监听方式及异同点

    jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...

  4. Java swing(awt):事件监听机制的实现原理+简单示例

    (1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...

  5. 创建图形用户界面GUI和事件监听机制的简单实现(java)

    创建图形化界面 1.创建Frame窗体      2.对窗体进行基本设置 比如:大小.位置.布局      3.定义组件      4.将组建通过窗体添加到窗体中 5.让窗体显示,通过setVisib ...

  6. .NET事件监听机制的局限与扩展

    .NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...

  7. java Gui编程 事件监听机制

    1.     GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式:   1. 命令交互方式    图书管理系统 ...

  8. JAVA之旅(三十一)——JAVA的图形化界面,GUI布局,Frame,GUI事件监听机制,Action事件,鼠标事件

    JAVA之旅(三十一)--JAVA的图形化界面,GUI布局,Frame,GUI事件监听机制,Action事件,鼠标事件 有段时间没有更新JAVA了,我们今天来说一下JAVA中的图形化界面,也就是GUI ...

  9. JAVA 图形开发之计算器设计(事件监听机制)

    /*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 前段时间刚帮同学用MFC写了个计算器,现在学到JAVA的图形开发,就试着水了一个计算器出来.(可以说 ...

随机推荐

  1. iOS模仿京东商城中的选择地区样式

    在ViewController文件中创建添加地址界面: @property(nonatomic,strong)UILabel *selectAreaLabel;//地区显示@property(nona ...

  2. 在ROS(indigo)中读取手机GPS用于机器人定位~GPS2BT在ubuntu和window系统下的使用方法~

    在ROS(indigo)中读取手机GPS用于机器人定位~GPS2BT在ubuntu和window系统下的使用方法~ 不需要额外购买GPS设备. 将手机GPS数据通过蓝牙传输给计算机使用,当然通过类似方 ...

  3. (NO.00002)iOS游戏精灵战争雏形(十)

    到目前为止,子弹是有去无回.如果子弹击中目标或者飞出屏幕,那么子弹也就没必要存在了. 这里的不存在不是把它从屏幕中删除,因为前面提到了子弹缓存的作用,所以这里仅仅将其设置为不可见就可以了. 首先处理飞 ...

  4. tomcat集群机制剖析及其生产部署选型

    为什么要使用集群? 为什么要使用集群?主要有两方面原因:一是对于一些核心系统要求长期不能中断服务,为了提供高可用性我们需要由多台机器组成的集群:另外一方面,随着访问量越来越大且业务逻辑越来越复杂,单台 ...

  5. Lucene 自动补全

    package com.pera.suggestion; import java.io.IOException; import java.io.Reader; import java.util.Arr ...

  6. PDA智能设备解决方案打包及部署

    演练:打包智能设备解决方案以便进行部署 Visual Studio 2008 本演练演示如何使用 Visual Studio 将应用程序及其资源打包到一个 CAB 文件中,以便可将其部署到最终用户的智 ...

  7. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  8. 漫谈程序员(十)大白菜装机版安装win7系统使用教程

    大白菜装机版安装win7系统使用教程 安装win7系统准备工作: ①使用大白菜装机版,制作一个大白菜u盘启动盘 ②将下载好的ghost win7系统镜像包放入制作好的大白菜u盘启动盘中. ③更改电脑硬 ...

  9. (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定

    本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 1. 网站管理平台WordPress和云计算平台Azure简介 (6分 ...

  10. Linux下进程通信之管道

    每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2再从内核缓冲区把 ...