基于Node如何实现EventEmitter,过程是什么
Admin 2022-07-18 群英技术资讯 516 次浏览
最近做了商品批发的需求,需要针对不同的商户选择对应的批发商品回显到原来的界面。由于该项目的代码是公司古董级别(这种代码都是程序猿的痛),解决问题的时候都是小心翼翼的。为了避免这种问题减少外部依赖,手动封装事件派发的函数。
我们了解到,Node采用了事件驱动机制,而EventEmitter就是Node实现事件驱动的基础
在EventEmitter的基础上,Node几乎所有的模块都继承了这个类,这些模块拥有了自己的事件,可以绑定/触发监听器,实现了异步操作
Node.js 里面的许多对象都会分发事件,比如 fs.readStream 对象会在文件被打开的时候触发一个事件
这些产生事件的对象都是 events.EventEmitter 的实例,这些对象有一个 eventEmitter.on() 函数,用于将一个或多个函数绑定到命名事件上
Node的events模块只提供了一个EventEmitter类,这个类实现了Node异步事件驱动架构的基本模式――观察者模式
在这种模式中,被观察者(主体)维护着一组其他对象派来(注册)的观察者,有新的对象对主体感兴趣就注册观察者,不感兴趣就取消订阅,主体有更新的话就依次通知观察者们
const EventEmitter = require('events') class MyEmitter extends EventEmitter {} const myEmitter = new MyEmitter() function callback() { console.log('触发了event事件!') } myEmitter.on('event', callback) myEmitter.emit('event') myEmitter.removeListener('event', callback);
基本代码如下所示:
//事件派发机制 (function() { var EventDispatcher = function() { var EventDispatcherClosure = function() { }; EventDispatcherClosure.prototype = { /** * 注册事件 * @param {Object} key * @param {Object} fn */ on: function(key, fn) { //获取当前的事件对象 var curEvents = this._getCurEvents(key); //先检查该事件是否已经注册过了 var flag = false; for (var i = 0, len = curEvents.length; i < len; i++) { if (curEvents[i].name == fn.name) { //已经出现过了,以最新注册的函数为主 flag = true; curEvents[i] = fn; break; } } if (!flag) { curEvents[curEvents.length] = fn; } this._register(key, curEvents); }, /** * 派发事件 * @param {Object} key * @param {Object} data */ dispatch: function(key) { //获取当前的事件对象 var curEvents = this._getCurEvents(key); var shouldDispatch = true; for (var i = 0, len = curEvents.length; shouldDispatch && i < len; i++) { try { //获取参数 var args = []; for (var j = 1, len1 = arguments.length; j < len1; j++) { args.push(arguments[j]); } shouldDispatch = curEvents[i].apply({}, args); } catch (e) { shouldDispatch = false; } } return shouldDispatch; }, remove: function(key) { if (this._getCurEvents(key)) { delete EventDispatcherClosure.events[key]; } }, /** * 根据key获取事件列表 * @param {Object} key */ _getCurEvents: function(key) { return EventDispatcherClosure.events[key] || []; }, /** * 注册时间 * @param {Object} key * @param {Object} events */ _register: function(key, events) { EventDispatcherClosure.events[key] = events; }, }; EventDispatcherClosure.events = {}; return { create: function() { return new EventDispatcherClosure(); } }; }; window.EventDispatcher = new EventDispatcher().create(); })();
首先定义一个全局变量的匿名函数,然后将全局变量挂在window上面,这样可以让我们在开发过程中的调用。在匿名函数的原型链上面添加事件分发、事件监听、事件删除等方法。
事件分发的调用
EventDispatcher.dispatch("test", obj)
事件监听
EventDispatcher.on("test", function callback(obj) { })
事件删除
EventDispatcher.on("test")
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享的是用vue怎样实现压缩图片再上传的功能。小编觉得挺实用的,很多场景都可以应用,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
这篇文章给大家分享的是用jQuery怎样判断是否有余数的内容,也就是进行除法运算时,判断是否整除,对大家学习if语句有一定的帮助,小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
这篇文章主要介绍了vue 表单输入框不支持focus及blur事件的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jquery获取select选中的值示例详解,js获取选中option的value值很简单,下面看本jquery教程的:selected选择器的使用。 html代码部分 selectoptionvalue=1张三/optionoptionvalue=2selected=selected李四/optionoptionvalue=3王五/option/selectbuttonid=getS
这篇文章主要介绍了Vue实现一种简单的无限循环滚动动画的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008