摘要:实现方式其实就是对方法做了一层封装,将一个封装好的代替传递给方法内部会执行一次监听回调函数,然后再调用对该回调进行删除。
事件驱动
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是如何实现这样的监听操作的。
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以及一些非常细节的地方可以自己试着去扩展,我这里就不一个一个的去写了,文章有写不好的地方或者看不懂的地方都可以给我留言哦。
如果觉得写的还行,方便的话帮忙点个赞哦,谢谢了。
以下我的新个人微信公众号,在里面也会为大家提供原创文章,欢迎大家关注,当关注用户量够了,我会在里面推出一些视频教程
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108980.html
摘要:为指定事件注册一个单次监听器,即监听器最多只会触发一次,触发后立刻解除该监听器。移除指定事件的某个监听器,监听器必须是该事件已经注册过的监听器。返回指定事件的监听器数组。如何创建空对象我们已经了解到,是要来储存监听事件监听器数组的。 毫无疑问,nodeJS改变了整个前端开发生态。本文通过分析nodeJS当中events模块源码,由浅入深,动手实现了属于自己的ES6事件观察者系统。千万不...
摘要:深入浅出一直想致力于写一篇关于广义讲解系统的文章,苦于时间有限,资源有限。事件驱动机制是通过内部单线程高效率地维护事件循环队列来实现的,没有多线程的资源占用和上下文的切换。 深入浅出Node.js 一直想致力于写一篇关于广义讲解Node.js系统的文章,苦于时间有限,资源有限。这篇文章是在结合自己的学习心得以及与行业大佬共同探讨下争对于熟练掌握JS语言后的广义Node.js.至于为什么...
摘要:深入浅出一直想致力于写一篇关于广义讲解系统的文章,苦于时间有限,资源有限。事件驱动机制是通过内部单线程高效率地维护事件循环队列来实现的,没有多线程的资源占用和上下文的切换。 深入浅出Node.js 一直想致力于写一篇关于广义讲解Node.js系统的文章,苦于时间有限,资源有限。这篇文章是在结合自己的学习心得以及与行业大佬共同探讨下争对于熟练掌握JS语言后的广义Node.js.至于为什么...
摘要:深入浅出一直想致力于写一篇关于广义讲解系统的文章,苦于时间有限,资源有限。事件驱动机制是通过内部单线程高效率地维护事件循环队列来实现的,没有多线程的资源占用和上下文的切换。 深入浅出Node.js 一直想致力于写一篇关于广义讲解Node.js系统的文章,苦于时间有限,资源有限。这篇文章是在结合自己的学习心得以及与行业大佬共同探讨下争对于熟练掌握JS语言后的广义Node.js.至于为什么...
阅读 3020·2021-11-24 10:32
阅读 675·2021-11-24 10:19
阅读 5067·2021-08-11 11:17
阅读 1455·2019-08-26 13:31
阅读 1257·2019-08-23 15:15
阅读 2285·2019-08-23 14:46
阅读 2263·2019-08-23 14:07
阅读 1073·2019-08-23 14:03