雇人做淘宝网站多少钱,莆田做网站排名,程林街网站建设,网站开发合同 附件★推荐方案#xff1a;使用 events npm库#xff1b; 可用范围#xff1a;vue、react、angular等任何框架都可使用#xff1b;且使用方式完全一致#xff1b; 本文仅介绍、讲解对web页面端项目的常用API#xff1b;通过events实现事件总线功能#xff1b; event库概述使用 events npm库 可用范围vue、react、angular等任何框架都可使用且使用方式完全一致 本文仅介绍、讲解对web页面端项目的常用API通过events实现事件总线功能 event库概述本次所使用到的库为通用库若在node环境使用则无需npm安装本身自带的浏览器环境下使用才需要npm安装。 events库是从 Node.js 上移植Events模块的功能因此可用的API完全一致除了仅限在node环境下使用的API 若想进一步深入去看node官网的event文档即可。注意版本差异根据npm文档的描述该库目前并未同步最新Node里对应的events模块 在VUE3的官方文档中描述到【平级组件或是跨越多层嵌套的组件间通信应使用一个外部的事件总线或是使用一个全局状态管理方案】。全局状态管理就则是像pinia这种本文就主要讲述事件总线; VUE2的话直接用官方API提供的即可当然如果vue2的相关API实现的事件总线不满足需求那自然也是推荐使用events库的 events库使用方式
1、安装
npm install events
2、引入使用、封装
import { EventEmitter } from events;// 大家根据各自业务需求自行封装对应风格的事件总线模块
export const emitter new EventEmitter();// 创建多个事件总线互不干扰。
export const emitter2 new EventEmitter();
这样我们就创建好了一个简单的事件总线实例也可以创建多个事件总线
3、注册监听器eventEmitter.on() 与监听函数的this指向
类型on(eventName: string | symbol, listener: (...args: any[]) void): this;
别名emitter.addListener(eventName, listener) import { emitter,emitter2 } from /utils/events// 可接收多个参数若emit触发该监听函数时未传参则是undefined// 第一个参数类型eventName: string | symbol// 第二个参数类型 listener: (...args: any[]) voidemitter.on(test1,function (val,val2,val3){console.log(val,val2,val3,可接受多个参数);console.log(this,该this指向为emitter实例若监听函数为箭头函数则该处this指向不用我解释了吧这是基础啊);})emitter.on(test1,function (){console.log(可多次注册同名的test1监听函数注意事项看 《7、监听数量相关内容》 );})// 按上一步所示不同事件总线实例创建监听器时eventName同名也不会互相影响emitter2.on(test1,(val){console.log(val);})function emitTest() { // 标准写法这样才可off卸载监听函数上面2个例子只是展示功能作用console.log(葬送的芙莉莲);}emitter.on(emitTest,emitTest)emitter.off(emitTest,emitTest)
另外EventEmitter 按照注册的顺序同步地调用所有监听器。 这确保了事件的正确排序并有助于避免竞争条件和逻辑错误。
4、触发监听器事件eventEmitter.emit()
emit类型为emit(eventName: string | symbol, ...args: any[]): boolean;
下面代码中的 emitter.emit(test1,1,向监听的函数传入多个参数) 表示触发所有 test1 的监听函数并传入后面那2个参数。
返回值如果事件有监听器则返回 true否则返回 false。
import { emitter,emitter2 } from /utils/eventsemitter.emit(test1,1,向监听的函数传入多个参数)emitter2.emit(test1,来自 emitter2 的问候.)// boolean返回值表示未触发该监听函数下面两个emit返回的结果都是falseconst has emitter2.emit(emitTest,返回false) // 就算on创建过监听函数off后此时触发不到也是返回falseconst has2 emitter2.emit(test666,返回false)
5、仅触发一次监听器事件eventEmitter.once()
类型once(eventName: string | symbol, listener: (...args: any[]) void): this;
使用 eventEmitter.once() 方法可以注册一个监听器该监听器最多为特定事件调用一次。 一旦事件被触发则监听器就会 先被注销 然后再调用该监听函数。
import { emitter,emitter2 } from /utils/eventslet countt 0emitter.once(test2,function () {counttconsole.log(countt);}) import { emitter } from /utils/eventsfunction demo (){let has emitter.emit(test2)console.log(has);
}
demo(); // 第一次Log是trueemit.once执行一次后就会销毁
demo(); // 销毁后再执行自然是找不到该监听函数的所以返回false
6、卸载/销毁 监听器 emitter.off()
类型off(eventName: string | symbol, listener: (...args: any[]) void): this;
别名emitter.removeListener()
从名为 eventName 的事件的监听器数组中移除指定的 listener。 on、once创建的监听器都可用off销毁 import { emitter } from /utils/eventsfunction emitTest() {console.log(葬送的芙莉莲);}emitter.on(emitTest,emitTest)emitter.off(emitTest,emitTest) 6、监听EventEmitter的 on、off 事件
import { EventEmitter } from events;export const emitter new EventEmitter();
// 在将监听器添加到其内部监听器数组之前EventEmitter 实例将触发自身的 newListener 事件。
// 以此来监听 事件总线 的添加事件
emitter.on(newListener, (eventName, listener) {console.log(eventName, listener,这是添加);
});
// 同理监听删除事件
emitter.on(removeListener, (eventName, listener) {console.log(eventName, listener,这是删除);
});
7、监听数量相关内容
默认监听同一事件名的最大数量为10若是注册超过10个以上则会抛出警告。 emitter.getMaxListeners() 获取emitter事件总线实例可注册监听器同一事件名的最大数量默认为10 通过emitter.setMaxListeners(8) 来更改限制传入Infinity或 0则表示不限制【虽然即使限制了但超出也只是抛出警告还是会正常注册该监听函数。抛警告是便于防止内存泄漏问题】另外setMaxListeners跟defaultMaxListeners无关setMaxListeners 修改了并不会更改 defaultMaxListeners 简单来说就是2个属性名set修改的是 _maxListeners 属性值该属性有值时以 _maxListeners 为优先没值则是 emitter.defaultMaxListeners 返回默认监听最大数量但好像没啥用返回undefined用getMaxListeners则能拿到官方说的10。 官方说defaultMaxListeners不要更改不然会影响所有实例。虽然我验证了下改了也没用但官方说啥就是啥你别改就完事了而且改这个属性也是不规范的做法。
import { EventEmitter } from events;
export const emitter new EventEmitter();console.log(emitter.defaultMaxListeners);// emitter.setMaxListeners(3)console.log(emitter.getMaxListeners());emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo) // 默认10个此时再注册则会报warn提醒你emitter.on(ceshi1,demo)
8、eventNames返回事件总线里已注册了的所有监听器事件名(eventName)。
类型eventNames(): Arraystring | symbol;
多次同名注册的也只返回一个eventName给数组。 查看某监听器事件名注册次数看下面的内容 9。 import { emitter } from /utils/events
console.log(emitter.eventNames())
9、listenerCount获取监听名为 eventName 的事件的监听器数量。
类型listenerCount(eventName: string | symbol): number;
import { EventEmitter } from events;
export const emitter new EventEmitter();emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)emitter.on(ceshi1,demo)console.log(emitter.listenerCount(ceshi1)); // log: 3
