JavaScript/TypeScript 实现一个高效的事件监听派发类

class Third

Description

Attention! Attention! Attention!
Note that this class does not maintain the order in which the message list listens
If A listens for the “show” event and B then listens for the “show” event, it will not show A and then show B, each time the event is removed
“Because the mistress does not abide by first come, first come!!”

If your project has multiple objects listening for an event and you care about the order in which the event is listened and dispatched, change the method “off” to use splice to remove events from the array.

案例 添加事件

  	//注册监听Third.on("message",this,this.message );Third.on("message",this,this.message2 );//注册监听一次Third.once("open",this,function(){});//移除指定Third.off("message",this,this.message );//移除 所有自身监听的message事件Third.off("message",this);//移除所有的message监听 Third.off("message");//移除所有this监听 所有事件Third.offall(this);//移除所有事件 清空事件池Third.offall();//派发时间 参数可变Third.do("message",1,false,"hello world");

API接口

public static on(event: string, caller: any, handl: Function): void //注册监听
public static once(event: string, caller: any, handl: Function): void //监听一次事件 回调会在第一时间被触发后删除自身
public static off(event: string, caller: any = undefined, handl: Function = undefined): void //移除监听
public static offall(caller: any = undefined) //移除所有监听
public static do(event: string, …params: any[]) //派发事件

源码

/** @Description:  Third 小三类 第三方消息派发工具类* * 注意！注意！注意！* 注意该类并不维护 消息列表监听的先后顺序   * 如果  A监听了 "show"事件  B接着监听了 "show"事件  并不会先 show A 再 show B, 每次事件移除的时候 * “因为小三是不遵守先来后到的!!! ”* 如果你的项目一个事件 有多个对象监听 并且很在意 监听和派发的顺序, 【 请修改 移除事件的方法 "off" 使用splice来移除数组中的事件 】* * ============================================================================================================* * attention! Attention! Attention!* Note that this class does not maintain the order in which the message list listens* If A listens for the "show" event and B then listens for the "show" event, it will not show A and then show B, each time the event is removed* "Because the mistress does not abide by first come, first come!!"** If your project has multiple objects listening for an event and you care about the order in which the event is listened and dispatched, change the method "off" to use splice to remove events from the array.* * * @Autor: geek7* @Version: 1.0* @Date: 2022-02-11 16:07:51* @LastEditors: geek7* @LastEditTime: 2022-02-11 16:30:03*/export default class Third {private static _handls: {[key: string]: {caller: any,handl: Function,once?: boolean}[]} = {};/*** 监听事件* @param event 事件名称* @param caller 作用域* @param handl 回调方法*/public static on(event: string, caller: any, handl: Function): void {if (undefined == Third._handls[event]) {Third._handls[event] = [{ caller, handl }];}else {Third._handls[event].push({ caller, handl });}}/*** 注册节点的特定事件类型回调，回调会在第一时间被触发后删除自身* @param event 事件名称* @param caller 作用域* @param handl 回调方法*/public static once(event: string, caller: any, handl: Function): void {if (undefined == Third._handls[event]) {Third._handls[event] = [{ caller, handl, once: true }];}else {Third._handls[event].push({ caller, handl, once: true });}}/*** 移除监听* @param event 事件名称* @param caller 作用域 如果忽略 则移除所有该事件的监听 off("show");//所有show事件相关监听都会被移除* @param handl 回调方法 如果忽略 则移除该事件列表里 所有caller相关的方法  off("show",this);// this作用域下所有对show的监听都会被移除*/public static off(event: string, caller: any = undefined, handl: Function = undefined): void {//获取事件队列const list = Third._handls[event];//遍历所有事件if (list && list instanceof Array) {//移除所有当前事件的监听if (undefined == caller) {Third._handls[event] = [];return;}let e = null;for (let i = 0; i < list.length; i++) {e = list[i];//移除对应事件if (e.caller == caller && (undefined == handl || handl == e.handl)) {//交换指针 移除尾部list.splice(i--, 1);}}}}/*** 移除监听者的所有事件监听 * @param caller 监听者 如果为null 则进行clear   offall(); 事件池归零*/public static offall(caller: any = undefined) {if (!caller) {Third._handls = {};}else {//遍历所有事件链表for (let k in Third._handls) {const list = Third._handls[k];if (list && list instanceof Array) {for (let i = 0; i < list.length; i++) {//移除对应事件if (list[i].caller == caller) {list.splice(i--, 1);}}}}}}/*** 派发事件* @param event 事件* @param params 可变参列表  do("show",true);   do("show",true,data);  do("show",data,true,"hello world",1234567890);*/public static do(event: string, ...params: any[]) {const list = Third._handls[event];if (list && list instanceof Array) {let t = null;for (let i = 0; i < list.length; i++) {//触发回调t = list[i];t.handl.call(t.caller, ...params);//仅触发一次 则触发后移除if (t.once) {list.splice(i--, 1);}}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！