使用TypeScript實現(xiàn)一個類型安全的EventBus示例詳解
更新時間：2022年06月29日 11:36:46 作者：羽墨
EventBus是工作中常用的工具,本文用Typescript實現(xiàn)一個具備基礎(chǔ)功能且類型安全的EventBus，是我近期學(xué)習(xí)Typescript的知識總結(jié)，對TypeScript實現(xiàn)EventBus相關(guān)知識感興趣的朋友一起看看吧
前言
隨著vue3的發(fā)布，TypeScript在國內(nèi)越來越流行，學(xué)習(xí)TypeScript也隨即變成了大勢所趨。本文就通過實現(xiàn)一個類型安全的EventBus來練習(xí)TypeScript，希望對小伙伴們有所幫助。
準(zhǔn)備工作
生成一個TypeScript的基礎(chǔ)架子：
// 創(chuàng)建目錄 mkdir ts-event-bus && cd ts-event-bus // 初始化工程 yarn init -y // 安裝typescript yarn add typescript -D // 生成typescript配置文件 npx tsc --init
這樣一來我們就搭建好了一個TypeScript的基礎(chǔ)架子，為了方便我們后續(xù)的測試，我們需要下載ts-node,它可以讓我們在不編譯TypeScript代碼的情況下運行TypeScript。
yarn add ts-node -D
目標(biāo)
- 基礎(chǔ)功能完備,包括注冊，發(fā)布，取消訂閱三個核心功能。
- 類型安全，能約束我們輸入的參數(shù)，并且有代碼提示。
思路
每一個Event都可以注冊多個處理函數(shù)，我們用一個Set來保存這些處理函數(shù)，再用一個Map來保存Event到對應(yīng)Set的映射,如圖所示:
具體實現(xiàn)
// 定義泛型函數(shù)類型
type Handler<T = any> = (val: T) => void;
class EventBus<Events extends Record<string, any>> {
/** 保存 key => set 映射 */
private map: Map<string, Set<Handler>> = new Map();
on<EventName extends keyof Events>(
name: EventName,
handler: Handler<Events[EventName]>
) {
let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!set) {
set = new Set();
this.map.set(name as string, set);
}
set.add(handler);
}
}這里我們分成邏輯和類型兩方面來講
邏輯方面，我們初始化了一個空的Map，然后當(dāng)調(diào)用on 用來注冊事件的時候，先去根據(jù)EventName來找有沒有對應(yīng)的Set，沒有就創(chuàng)建一個，并且把事件添加到Set中，這一部分的代碼相當(dāng)簡單，實現(xiàn)起來也沒什么難度。
類型方面，我們將EventBus 定義為一個泛型類，并約束泛型為 Events extends Record<string, any>,這樣就約束了傳入的泛型參數(shù)必須是一個對象類型，例如：
type Events = {
foo : number;
bar : string;
}我們可以通過這個類型來獲取key對應(yīng)value的類型
// number; type ValueTypeOfFoo = Events['foo']
進(jìn)而可以獲取foo事件對應(yīng)的handler函數(shù)的類型,即:
// (val:number) => void; type HandlerOfFoo = Handler<Events['foo']>
我們又將on方法設(shè)置為泛型函數(shù)，同時約束EventName extends keyof Events，這樣一來Events[EventName] 就是對應(yīng)值的類型，Handler<Events[EventName]>就是處理函數(shù)的類型。通過這樣的方式我們實現(xiàn)了一個類型安全的on方法。
接著我們編寫一段代碼測試一下
可以看到，我們在vscode中編寫代碼的時候，編輯器能給我們代碼提示了。
我們鍵入handler函數(shù)，編輯器也會提醒我們val是一個string類型。
當(dāng)我們傳的參數(shù)不合法的時候，TypeScript也會給我們警告
接下來我們依葫蘆畫瓢實現(xiàn)emit函數(shù)。
class EventBus<Events extends Record<string, any>> {
... others code
/** 觸發(fā)事件 */
emit<EventName extends keyof Events>(
name: EventName,
value: Events[EventName]
) {
const set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!set) return;
const copied = [...set];
copied.forEach((fn) => fn(value));
}
}先找到EventName對應(yīng)的Set，如果有就取出并依次執(zhí)行。這里的邏輯也相當(dāng)簡單，我們編寫代碼測試一下
const bus = new EventBus<{
foo: string;
bar: number;
}>();
bus.on("foo", (val) => {
console.log(val);
});
// 輸出 hello
bus.emit("foo", "hello");我們在終端運行npx ts-node ./index.ts,輸出hello,說明我們的程序已經(jīng)生效。
接下來我們實現(xiàn)取消訂閱的功能。
{
...
off<EventName extends keyof Events>(
name?: EventName,
handler?: Handler<Events[EventName]>
): void {
// 什么都不傳，則清除所有事件
if (!name) {
this.map.clear();
return;
}
// 只傳名字，則清除同名事件
if (!handler) {
this.map.delete(name as string);
return;
}
// name 和 handler 都傳了，則清除指定handler
const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!handlers) {
return;
}
handlers.delete(handler);
}
}取消訂閱我們這樣設(shè)計，它傳入0至2個參數(shù)，什么都不傳代表清除所有事件，只傳一個參數(shù)代表清除同名事件，傳兩個參數(shù)代表只清除該事件指定的處理函數(shù)，所以它的兩個參數(shù)都是可選的，實現(xiàn)的邏輯也非常簡單，我們這里不多贅述。
我們編寫一段測試代碼看下效果
const bus = new EventBus<{
foo: string;
bar: number;
}>();
// 測試傳2個參數(shù)的情況
const handlerFoo1 = (val: string) => {
console.log("2個參數(shù) handlerFoo1 => ", val);
};
bus.on("foo", handlerFoo1);
bus.emit("foo", "hello");
// 打印 2個參數(shù) handlerFoo1 => hello
bus.off("foo", handlerFoo1);
bus.emit("foo", "hello");
// 什么都沒打印
// 測試傳1個參數(shù)的情況
const handlerFoo2 = (val: string) => {
console.log("1個參數(shù) handlerFoo2 => ", val);
};
const handlerFoo3 = (val: string) => {
console.log("1個參數(shù) handlerFoo3 => ", val);
};
bus.on("foo", handlerFoo2);
bus.on("foo", handlerFoo3);
bus.emit("foo", "hello");
// 打印 1個參數(shù) handlerFoo2 => hello
// 打印 1個參數(shù) handlerFoo3 => hello
bus.off("foo");
bus.emit("foo", "hello");
// 什么都沒輸出
// 測試傳0個參數(shù)的情況
const handlerFoo4 = (val: string) => {
console.log("0個參數(shù) handlerFoo4 => ", val);
};
const handlerBar1 = (val: number) => {
console.log("0個參數(shù) handlerBar1 => ", val);
};
bus.on("foo", handlerFoo4);
bus.on("bar", handlerBar1);
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 打印 1個參數(shù) handlerFoo4 => hello
// 打印 1個參數(shù) handlerBar1 => 123
bus.off();
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 什么都沒輸出
從測試結(jié)果來看，我們的off方法功能也沒問題，這樣就完成了我們的EventBus。
此外，我們還可以給我們的方法加上注釋，這樣在我們鼠標(biāo)移到api上方和我們輸入?yún)?shù)的時候，編輯器就會有提示。
/**
* 訂閱事件
* @param name 事件名
* @param handler 事件處理函數(shù)
*/
on<EventName extends keyof Events>(
name: EventName,
handler: Handler<Events[EventName]>
) {
let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!set) {
set = new Set();
this.map.set(name as string, set);
}
set.add(handler);
}
可以看到，編輯器給我們提供了很好的提示，極大方便了我們的編碼。
我們還可以用函數(shù)重載來改進(jìn)我們的off方法,以獲得更友好的提示
{
/**
* 清除所有事件
*/
off(): void;
/**
* 清除同名事件
* @param name 事件名
*/
off<EventName extends keyof Events>(name: EventName): void;
/**
* 清除指定事件
* @param name 事件名
* @param handler 事件處理函數(shù)
*/
off<EventName extends keyof Events>(
name: EventName,
handler: Handler<Events[EventName]>
): void;
off<EventName extends keyof Events>(
name?: EventName,
handler?: Handler<Events[EventName]>
): void {
// 什么都不傳，則清除所有事件
if (!name) {
this.map.clear();
return;
}
// 只傳名字，則清除同名事件
if (!handler) {
this.map.delete(name as string);
return;
}
// name 和 handler 都傳了，則清除指定handler
const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!handlers) {
return;
}
handlers.delete(handler);
}
}
改造前的提示:
改造后的提示:
至此，我們就完成了一個功能完備，類型安全的EventBus了。
全部代碼
type Handler<T = any> = (val: T) => void;
class EventBus<Events extends Record<string, any>> {
private map: Map<string, Set<Handler>> = new Map();
/**
* 訂閱事件
* @param name 事件名
* @param handler 事件處理函數(shù)
*/
on<EventName extends keyof Events>(
name: EventName,
handler: Handler<Events[EventName]>
) {
let set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!set) {
set = new Set();
this.map.set(name as string, set);
}
set.add(handler);
}
/**
* 觸發(fā)事件
* @param name 事件名
* @param handler 事件處理函數(shù)
*/
emit<EventName extends keyof Events>(
name: EventName,
value: Events[EventName]
) {
const set: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!set) return;
const copied = [...set];
copied.forEach((fn) => fn(value));
}
/**
* 清除所有事件
*/
off(): void;
/**
* 清除同名事件
* @param name 事件名
*/
off<EventName extends keyof Events>(name: EventName): void;
/**
* 清除指定事件
* @param name 事件名
* @param handler 處理函數(shù)
*/
off<EventName extends keyof Events>(
name: EventName,
handler: Handler<Events[EventName]>
): void;
off<EventName extends keyof Events>(
name?: EventName,
handler?: Handler<Events[EventName]>
): void {
// 什么都不傳，則清除所有事件
if (!name) {
this.map.clear();
return;
}
// 只傳名字，則清除同名事件
if (!handler) {
this.map.delete(name as string);
return;
}
// name 和 handler 都傳了，則清除指定handler
const handlers: Set<Handler<Events[EventName]>> | undefined = this.map.get(
name as string
);
if (!handlers) {
return;
}
handlers.delete(handler);
}
}
const bus = new EventBus<{
foo: string;
bar: number;
}>();
// 測試傳2個參數(shù)的情況
const handlerFoo1 = (val: string) => {
console.log("2個參數(shù) handlerFoo1 => ", val);
};
bus.on("foo", handlerFoo1);
bus.emit("foo", "hello");
// 打印 2個參數(shù) handlerFoo1 => hello
bus.off("foo", handlerFoo1);
bus.emit("foo", "hello");
// 什么都沒打印
// 測試傳1個參數(shù)的情況
const handlerFoo2 = (val: string) => {
console.log("1個參數(shù) handlerFoo2 => ", val);
};
const handlerFoo3 = (val: string) => {
console.log("1個參數(shù) handlerFoo3 => ", val);
};
bus.on("foo", handlerFoo2);
bus.on("foo", handlerFoo3);
bus.emit("foo", "hello");
// 打印 1個參數(shù) handlerFoo2 => hello
// 打印 1個參數(shù) handlerFoo3 => hello
bus.off("foo");
bus.emit("foo", "hello");
// 什么都沒輸出
// 測試傳0個參數(shù)的情況
const handlerFoo4 = (val: string) => {
console.log("0個參數(shù) handlerFoo4 => ", val);
};
const handlerBar1 = (val: number) => {
console.log("0個參數(shù) handlerBar1 => ", val);
};
bus.on("foo", handlerFoo4);
bus.on("bar", handlerBar1);
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 打印 1個參數(shù) handlerFoo4 => hello
// 打印 1個參數(shù) handlerBar1 => 123
bus.off();
bus.emit("foo", "hello");
bus.emit("bar", 123);
// 什么都沒輸出
后記
EventBus是工作中常用的工具,本文用Typescript實現(xiàn)一個具備基礎(chǔ)功能且類型安全的EventBus，是我近期學(xué)習(xí)Typescript的知識總結(jié)，希望小伙伴們有所幫助。
本文的代碼已同步到GitHub上，喜歡的同學(xué)可以 clone 下來學(xué)習(xí)，如果喜歡那就點個??吧！
到此這篇關(guān)于用TypeScript實現(xiàn)一個類型安全的EventBus的文章就介紹到這了,更多相關(guān)TypeScript實現(xiàn)類型安全的EventBus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在JavaScript中，函數(shù)的功能十分強大，除了函數(shù)相關(guān)的基礎(chǔ)知識外，掌握一些高級函數(shù)并應(yīng)用起來，不僅能讓JS代碼看起來更為精簡，還可以提升性能，本文是小編總結(jié)的一些常用的、重要的函數(shù)2018-01-01
關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置
本篇文章小編將為大家介紹，關(guān)于在IE下的一個安全BUG --可用于跟蹤用戶的系統(tǒng)鼠標(biāo)位置。需要的朋友可以參考一下2013-04-04
javascript 設(shè)計模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計模式之享元模式,結(jié)合實例形式詳細(xì)分析了javascript 設(shè)計模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript面向?qū)ο罄^承原理與實現(xiàn)方法分析
這篇文章主要介紹了JavaScript面向?qū)ο罄^承原理與實現(xiàn)方法,結(jié)合實例形式分析就面向?qū)ο蟪绦蛟O(shè)計中原形、對象、繼承的相關(guān)概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2018-08-08
用Javascript判斷圖片大小，其實只要寫一個簡單的函數(shù)就可以了，使用其他語言進(jìn)行判斷，過程比較復(fù)雜，用 Javascript 判斷輕松搞定2014-11-11
JGrid 中，可以拖動改變列寬，簡單的原理就是改變相應(yīng)的 col 的 style.width 今天看到skybot 同學(xué)在問這個問題，就又把這個功能拿出來，單獨實現(xiàn)了一下（有改進(jìn)）2008-07-07
前一段時間看了一本javascript的書，書名為Javascript DOM 高級程序設(shè)計 由【加】Jeffrey Sambells和【美】2009-06-06
學(xué)過JAVA的人對函數(shù)的覆蓋和重載肯定是再熟悉不過了。2009-09-09
這篇文章主要介紹了細(xì)說webpack6 Babel的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
今天小編就為大家分享一篇layer.confirm取消按鈕綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08