深入nodejs-核心模块Events详解(事件驱动)

时间: 2019-01-02阅读: 679标签: 事件

事件驱动

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。Allows you to build scalable network applications usingJavaScript on the server-side.

对于上面这段官方的引用大家应该都看过,nodejs是基于事件驱动和非阻塞I/O的方式来设计运行的,那么作为实现事件驱动的核心模块Events就成了深入学习node.js的关键。在node中大部分的模块的实现都继承了Events类。 比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。


那么问题是什么是事件驱动呢?

简单来说,就是通过监听事件的状态变化来做出相应的操作。比如读取一个文件,文件读取完毕,或者文件读取错误,那么就触发对应的状态,然后调用对应的回掉函数来进行处理。

我们来简单的看几段代码来回忆一下:

    const fs = require('fs');
    
    let rs = fs.createReadStream('1.txt');
    
    // 监听文件打开操作
    rs.on('open', function() {
      console.log('open');
    });
    
    // 监听数据流读取
    rs.on('data', function(data) {
      console.log(data);
    });
    
    // 监听错误
    rs.on('error', function() {
      console.log('error');
    });
    
    // 监听读取结束操作
    rs.on('end', function() {
      console.log('end');
    });
    
    
    // 监听文件关闭操作
    rs.on('close', function() {
      console.log('close');
    });

上面这段在创建文件读取流的操作上,针对文件的打开,数据,错误,结束,关闭等几个状态进行了监听的回调处理,这也应征了我们上面的定义通过监听事件的状态变化来做出相应的操作。
那么这些监听事件又是如何触发的呢?它是通过Events类中的emit方法去发射事件的。那么下面我们来看一下Events是如何实现这样的监听操作的。


Events类

主要的几个核心API

  • on(eventName, listener)和emitter.addListener(eventName, listener):对指定事件绑定事件处理函数
  • once(eventName, listener):对指定事件指定只执行一次的事件处理函数
  • emit(eventName[, ...args]): 触发指定事件
  • removeListener(eventName, listener):对指定事件解除事件处理函数
  • removeAllListeners([event]):对指定的事件接触所有的事件处理函数
  • setMaxListeners 设置最大队列的长度

下面来看一下代码,看看是怎么使用的

    const events = require('events');
    
    const EventsEmitter = new events();
    
    //===============事件监听部分===============
    EventsEmitter.on('open', function() {
      console.log('open');
    });
    
    EventsEmitter.on('data', function(data) {
      console.log(data);
    });
    
    EventsEmitter.on('error', function() {
      console.log('error');
    });
    
    EventsEmitter.on('end', function() {
      console.log('end');
    });
    
    EventsEmitter.on('close', function() {
      console.log('close');
    });
    
    //=============事件触发部分=================
    
    // 触发open事件
    EventsEmitter.emit('open');
    // 触发data事件,并传递一个字符串参数'test'
    EventsEmitter.emit('data','test');
    // 触发error事件
    EventsEmitter.emit('error');
    // 触发end事件
    EventsEmitter.emit('end');
    // 触发close事件
    EventsEmitter.emit('close');

看完上面这段代码是不是更进一步的理解了呢。我们回顾最最上面的那段文件流监听的代码,其实就是文件在不同的状态下去发射相应的emit事件。 而在那段代码中我们并没有去引入events这个node提供的模块,是因为文件流中继承了events模块,所以rs这个变量也就拥有了相应的rs.on()这个方法了。

看到这里我想应该都了解的差不多了。那么下面来试着实现一下Events这个类,加深理解。


初始化Events模块

  • 创建一个Events类
  • 初始化this.events用来保存我们需要监听的事件
  • 将模块导出
class Events {
  constructor() {
    this.events = {};
  }
}

module.exports = Events;


实现Events.on方法

  • on方法接收两个参数:

    • type:监听的事件类型
    • listener:回调函数
  • 将对应的事件先存放在一个对象中,分两种情况:

    • 该事件对象不存在,那么以type为key,[listener]为值存放在实现初始化好的this.events对象中(注意这里存的是一个数组,例如data事件,this.events = {data:[callback]})
    • 如果该事件已经存在则直接push
    • 监听函数就这么简单的实现了,接下来就是等着被emit触发了。
  /**
   * 事件监听
   * @param {*} type        监听的事件类型
   * @param {*} listener    回调函数
   */
  on(type, listener) {
    if (this.events[type]) {
      this.events[type].push(listener);
    } else {
      this.events[type] = [listener];
    }
  }

这里在补充一下,同一个监听事件是可以添加多个的,所以这里才会this.events[type]才会给一个数组来存储

实现Events.emit方法

  • 接收两个参数:

    • type:要触发的事件类型
    • ...rest:若干个参数,传递给对应事件的回调函数
  • 通过type,在this.events里找到相应的事件,这里我们上面是存成了一个数组,里面对应的是事件的回调好书。
  • 循环数组,执行所有对应事件的回调。
  /**
   * 事件触发
   * @param {*} type        要触发的事件类型
   * @param  {...any} rest  接收到的若干个参数,这个参数会作为参数被传递到对应事件的回调函数中
   */
  emit(type, ...rest) {
    if (this.events[type]) {
      this.events[type].forEach(listener => {
        listener.apply(this, rest);
      });
    }
  }

写到这里,我们之前的代码就能够引入自己写的这个Events模块来执行了


实现Events.removeListener方法

这个方法是用来删除对应事件的某个监听函数,那么我们只需要把该事件从this.events[type]中删除即可

  • 接收两个参数:

    • type:事件类型
    • listener:要删除的监听函数
  • 通过this.events[type]找到对应的事件监听函数数组
  • 通过filter对要删除的监听函数进行过滤
  /**
   * 删除指定事件中的监听函数
   * @param {*} type      对应的事件 
   * @param {*} listener  要删除的监听函数
   */
  removeListener(type, listener) {
    if (this.events[type]) {
      this.events[type].filter(l => l !== listener);
    }
  }  


实现Events.once方法

这个方法和on一样,唯一的区别就是它只会执行一次,即便多次调用emit去触发相同的事件监听,它也只会执行一次。

  • 实现方式其实就是对on()方法做了一层封装,将一个封装好的wraper代替listener传递给on()方法
  • wraper内部会执行一次监听回调函数,然后再调用this.removeListern对该回调进行删除。
  /**
   * 事件监听,但是只执行一次
   * @param {*} type        监听的事件类型
   * @param {*} listener    回调函数
   */
  once(type, listener) {
    const wraper = (...rest) => {
      listener.apply(this, rest);
      this.removeListener(type, wraper);
    };
    this.on(type, wrapper);
  }


完整代码

class Events {
  constructor() {
    this.events = {};
  }
  /**
   * 事件监听
   * @param {*} type        监听的事件类型
   * @param {*} listener    回调函数
   */
  on(type, listener) {
    if (this.events[type]) {
      this.events[type].push(listener);
    } else {
      this.events[type] = [listener];
    }
  }

  /**
   * 事件监听,但是只执行一次
   * @param {*} type        监听的事件类型
   * @param {*} listener    回调函数
   */
  once(type, listener) {
    const wraper = (...rest) => {
      listener.apply(this, rest);
      this.removeListener(type, wraper);
    };
    this.on(type, wrapper);
  }

  /**
   * 事件触发
   * @param {*} type        要触发的事件类型
   * @param  {...any} rest  接收到的若干个参数,这个参数会作为参数被传递到对应事件的回调函数中
   */
  emit(type, ...rest) {
    if (this.events[type]) {
      this.events[type].forEach(listener => {
        listener.apply(this, rest);
      });
    }
  }

  /**
   * 删除指定事件中的监听函数
   * @param {*} type      对应的事件
   * @param {*} listener  要删除的监听函数
   */
  removeListener(type, listener) {
    if (this.events[type]) {
      this.events[type].filter(l => l !== listener);
    }
  }
}

module.exports = Events;


总结

Events模块是node非常核心的模块,它对你深入去学习node有很大的帮助,上面我只写了几个方法,内部还有几个API以及一些非常细节的地方可以自己试着去扩展,我这里就不一个一个的去写了


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/1948

$(document).on(click)点击事件在ios无效的解决方案

以上代码在Pc浏览器和android上都能触发点击事件,但是在ios上点击却完全没有反应。在查询相关资料后发现:在ios中这些元素没有click事件,div本身默认是不可点击的。

JavaScript 和 Node.js 中的“事件驱动”是什么意思?

事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。

如何给div、p添加onload事件?

其实只有 <body>、<frame>、<iframe>、<img>、<link>、<script>、<style> 这些标签才有onload事件,而div、p等标签是没有的。但如果我们还是想在div append到DOM时做一些事情该怎么办呢?

Js事件系统

提到事件,相信每位Javascript开发者都不会陌生,由于Javascript是先有实现,后有规范,因此,对于大部分人来说,事件模块可以说是比较模糊的,本文将从不同角度帮助你理清楚事件模块。

Openlayers 禁用鼠标双击缩放事件(ol.interaction.DoubleClickZoom)

openlayers地图加载时,默认会有9个交互事件,其中可以看到控制双击缩放事件的DoubleClickZoom,我们知道在绘制线时,结束的响应事件也是双击,所以在绘制线时和双击缩放事件就会冲突了。

Js事件的截获

利用事件的捕获阶段,添加事件。再利用触发事件元素(e.target)来判断(根据一定的标识或者某些特征)是否是我们需要劫持的dom。

vue.js 事件绑定

(1)使用v-on指令可以添加事件监听,语法:2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

cocoscreator 防止button连击多次触发事件

很多时候,ui上面的button都只需要单击触发一次,当用户快速连续点击时就有可能出现非意料的事情,解决这个问题很简单,只要规定button在指定间隔时间内只能触发一次就行。

jquery使用on()方法绑定的事件被执行多次的问题

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。

Js中常用事件及说明

load页面加载完成时触发,beforeunload窗口关闭之前触发,unload窗口关闭时触发,focus窗口得到焦点时触发,blur窗口失去焦点时触发,error页面上有脚本报错时触发

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全