node.js如何自定义实现一个EventEmitter


Posted in Javascript onJuly 16, 2021

前言

最近做了商品批发的需求,需要针对不同的商户选择对应的批发商品回显到原来的界面。由于该项目的代码是公司古董级别(这种代码都是程序猿的痛),解决问题的时候都是小心翼翼的。为了避免这种问题减少外部依赖,手动封装事件派发的函数。

一、是什么

我们了解到,Node采用了事件驱动机制,而EventEmitter就是Node实现事件驱动的基础
在EventEmitter的基础上,Node几乎所有的模块都继承了这个类,这些模块拥有了自己的事件,可以绑定/触发监听器,实现了异步操作
Node.js 里面的许多对象都会分发事件,比如 fs.readStream 对象会在文件被打开的时候触发一个事件
这些产生事件的对象都是 events.EventEmitter 的实例,这些对象有一个 eventEmitter.on() 函数,用于将一个或多个函数绑定到命名事件上

二、nodejs中EventEmitter使用方法

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")

代码封装的比较简单

到此这篇关于node.js如何自定义实现一个EventEmitter的文章就介绍到这了,更多相关node实现EventEmitter内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 #Javascript
html5 录制mp3音频支持采样率和比特率设置
js基础语法与maven项目配置教程案例
JavaScript与JQuery框架基础入门教程
Jul 15 #Javascript
Python机器学习之决策树和随机森林
微信小程序scroll-view不能左右滑动问题的解决方法
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
You might like
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Vuex实现简单购物车
2021/01/10 Vue.js
JavaScript仿京东轮播图效果
2021/02/25 Javascript
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
中层竞聘演讲稿
2014/01/09 职场文书
年度考核自我鉴定
2014/02/02 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
技术入股合作协议书
2014/10/07 职场文书
世界遗产的导游词
2015/02/13 职场文书
高三物理教学反思
2016/02/20 职场文书