-
Mitt类设计
-
emitter属性：用于存储事件和对应的处理器
-
on方法：订阅事件
-
off方法：取消订阅事件
-
emit方法：触发事件
export class Mitt<T> {private readonly emitter: Record<string, Array<(value: T[keyof T]) => void>> = {};/*** 订阅事件* @param eventName 事件名称，应为T的属性名* @param cb 事件处理函数*/on(eventName : string, cb : ( value : T[keyof T]) => void ) {this.emitter[eventName] ? this.emitter[eventName].push(cb) : this.emitter[eventName] = [cb];}/*** 取消订阅事件* @param eventName 事件名称，应为T的属性名* @param cb 事件成功回调*/off(eventName: string, cb?: () => void): void {delete this.emitter[eventName];if (cb) { cb(); }}/*** 取消所有订阅事件*/offAll() {Object.keys(this.emitter).forEach(key => {delete this.emitter[key];});}/*** 发布事件* @param eventName 事件名称，应为T的属性名* @param value 事件参数*/emit(eventName : string, value : any) {if (this.emitter[eventName]) {this.emitter[eventName].forEach(cb => cb(value));}}}-
使用Mitt实例
-
创建Mitt实例：实例化Mitt类
-
订阅事件：调用on方法订阅事件
-
触发事件：调用emit方法触发事件
-
取消订阅：调用off方法取消订阅
import { Mitt } from "@/utils/Mitt";let mitt = new Mitt();mitt.emit("test", [1,2,3,4]);mitt.on("test", (data: []) => {console.log(data);});setTimeout(() => {mitt.off("test", () => {console.log("取消了");});},30000);提示：off方法的回调参数是可选的，如果提供，会在取消订阅后执行。
)
)
