-
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方法的回調參數是可選的，如果提供，會在取消訂閱后執行。
)
)
