Javascript事件總線庫mitt的源碼指南
mitt 是一個輕量級的 JavaScript 事件總線庫,可以用于處理事件和消息傳遞。mitt 提供了一個簡單而強大的 API,用于在程序中實現組件之間的松散耦合通信。
本文將探索 mitt 的源碼,了解其實現原理。
unsetunset了解 Event Emitter / Pub/Subunsetunset
在 JavaScript 中,事件發射器(Event Emitter)和發布-訂閱(Pub/Sub)模式都屬于行為型設計模式。
這兩種模式都是用于在程序中實現組件之間的松散耦合,以便它們可以相互通信而不需要直接依賴彼此。這種松散耦合可以提高代碼的可維護性和可擴展性。例如,Node.js 中的 EventEmitter 類是一個事件發射器的實現,而 RxJS 庫提供了一個強大的發布-訂閱模式的實現。
事件發射器模式
是一種基于事件的設計模式,它使用一個事件發射器對象來管理事件和事件監聽器。事件發射器對象維護一個事件列表,其中每個事件都有一個名稱和一個或多個事件監聽器。當事件發射器對象觸發一個事件時,所有監聽該事件的事件監聽器都會被調用,并傳遞給它們相關的數據。事件發射器模式通常用于處理異步事件,例如用戶交互、網絡請求和定時器等。
發布-訂閱模式
是一種基于消息的設計模式,它使用一個主題(或發布者)對象來管理消息和訂閱者對象。主題對象維護一個消息列表,其中每個消息都有一個名稱和一個或多個訂閱者。當主題對象發送一條消息時,所有訂閱該消息的訂閱者都會收到該消息,并采取適當的行動。發布-訂閱模式通常用于處理解耦邏輯,例如模塊之間的通信、組件之間的通信和跨頁面的通信等。
unsetunset源碼解析unsetunset
mitt 的核心源碼只包含了一個函數,它返回一個事件管理對象(下面的代碼移除 TypeScript 相關內容,以便于理解)。
/*
* 創建事件發射器,用于注冊、移除和觸發事件
* @param {Map} all - 存儲所有事件類型及其對應的處理函數的 Map 對象
* @returns {Object} - 包含 all、on、off 和 emit 方法的對象
*/
function mitt(all) {
all = all || new Map();
return {
// 事件名稱與已注冊的處理函數之間的映射表
all,
/**
* 注冊事件處理函數
* @param {string} type - 要監聽的事件類型(用 '*'表示所有事件)
* @param {function} handler - 響應指定事件時要調用的函數
*/
on(type, handler) {
// 獲取事件類型對應的處理函數列表
const handlers = all.get(type);
// 已有處理函數,將新處理函數添加到處理函數列表;沒有,則用新處理函數初始化處理函數列表
if (handlers) {
handlers.push(handler);
} else {
all.set(type, [handler]);
}
},
/**
* 注銷事件處理函數
* 如果省略 handler,則會注銷所有指定類型的處理程序
* @param {string} type - 要注銷注冊 handler的事件類型(用 '*'刪除通配符處理程序)
* @param {function} handler - 要注銷的處理函數
*/
off(type, handler) {
const handlers = all.get(type);
if (handlers) {
// 如果指定了要注銷的事件處理函數,從處理函數列表中移除它;
// 未指定,則將該事件類型的處理函數列表清空
if (handler) {
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
} else {
all.set(type, []);
}
}
},
/**
* 觸發事件,調用指定類型的所有處理程序。
* 如果存在,將在匹配類型的處理程序之后調用 '*' 處理程序。
*
* 注意:不支持手動觸發 '*' 處理程序
* @param {string} type - 要觸發的事件類型
* @param {any} evt - 傳遞給每個事件處理函數的參數(推薦對象)
*/
emit(type, evt) {
let handlers = all.get(type);
if (handlers) {
// 如果有處理函數,依次調用處理函數并傳入參數
// 注:使用 slice 函數用于創建數組的副本,避免影響原始列表
handlers
.slice()
.map((handler) => {
handler(evt);
});
}
// 獲取通配符事件類型對應的處理函數列表,有則依次調用并傳參
handlers = all.get('*');
if (handlers) {
handlers
.slice()
.map((handler) => {
handler(type, evt);
});
}
},
};
}
使用:
const emitter = mitt()
// 監聽一個事件
emitter.on('foo', e => console.log('foo', e) )
// 監聽所有事件
emitter.on('*', (type, e) => console.log(type, e) )
// 觸發一個事件
emitter.emit('foo', { a: 'b' })
// 清除所有事件
emitter.all.clear()
// 使用處理函數引用
function onFoo() {}
emitter.on('foo', onFoo) // 監聽
emitter.off('foo', onFoo) // 移除監聽
unsetunset技巧unsetunset
巧用位運算符
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
>>> 0 是一種位運算技巧,用于將索引轉換為非負整數(因為 JavaScript 中的位運算符只能用于 32 位整數)。
handlers.indexOf(handler) 返回指定處理函數在處理函數列表中的索引,如果處理函數不存在于列表中,則返回 -1。 此時,執行 -1 >>> 0,其結果為 4294967295,遠大于 handlers 數組長度。 當 splice() 方法的第一個參數大于或等于數組的長度時,它不會刪除任何元素。
這樣做的目的是為了避免出現負數索引值,因為負數索引值會導致刪除錯誤的處理函數。
-1 >>> 0 的執行過程
在 JavaScript 中可使用 >>> 將有符號整數轉為無符號整數。
將 -1 表示為二進制數,即 11111111 11111111 11111111 11111111。 執行無符號右移操作,將該二進制數向右移動 0 位,即不移動,得到的結果仍為 11111111 11111111 11111111 11111111。 將結果轉換為十進制數,即 4294967295。因此,-1 >>> 0 的結果為 4294967295。
創建數組副本
handlers.slice().map((handler) => {
handler(evt);
});
使用 slice() 方法可以在不修改原始數組的情況下創建一個新的數組副本,它包含原始數組中的所有元素,因此對新數組的操作不會影響原始數組。
除此之外,還有以下幾種方式可復制數組:
- arr.concat[]
- 展開運算符 [...arr]
- Array.from(arr)
unsetunset添加 TypeScript 類型unsetunset
定義基礎類型:
export type EventType = string | symbol;
// 事件處理器,可選的事件參數,不返回值
export type Handler<T = unknown> = (event: T) => void;
// 定義一個通用的事件處理函數類型,可以處理多種不同類型的事件
export type WildcardHandler<T = Record<string, unknown>> = (
type: keyof T, // 必須是 T 類型中的某個屬性名稱
event: T[keyof T] // 必須是 T 類型中所有屬性值的聯合類型
) => void;
// 一個包含當前已注冊的某種類型事件處理程序的數組
export type EventHandlerList<T = unknown> = Array<Handler<T>>;
export type WildCardEventHandlerList<T = Record<string, unknown>> = Array<WildcardHandler<T>>;
// 一個 Map 類型,用于存儲事件類型及其處理函數列表
// 在 TypeScript 中,Map 是一個泛型類型,可以指定鍵和值的類型。例如,Map<string, number> 表示一個鍵為字符串類型,值為數字類型的 Map 對象。
export type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
keyof Events | '*',
// EventHandlerList<Events[keyof Events]> 表示一個處理 Events[keyof Events] 類型事件的處理函數列表,也就是說,事件類型為 Events 中所有屬性值的聯合類型。
// WildCardEventHandlerList<Events> 表示一個處理所有事件類型的處理函數列表
EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
>;
事件管理對象:
export interface Emitter<Events extends Record<EventType, unknown>> {
all: EventHandlerMap<Events>;
on<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>): void;
// 通配符事件類型 '*' 的重載
on(type: '*', handler: WildcardHandler<Events>): void;
off<Key extends keyof Events>(type: Key, handler?: Handler<Events[Key]>): void;
off(type: '*', handler: WildcardHandler<Events>): void;
emit<Key extends keyof Events>(type: Key, event: Events[Key]): void;
emit<Key extends keyof Events>(type: undefined extends Events[Key] ? Key : never): void;
}
在 mitt 函數中使用上述定義的類型:
function mitt<Events extends Record<EventType, unknown>>(all?: EventHandlerMap<Events>): Emitter<Events> {
// 兩種事件處理器的聯合類型
type GenericEventHandler =| Handler<Events[keyof Events]> | WildcardHandler<Events>;
return {
on<Key extends keyof Events>(type: Key, handler: GenericEventHandler) {/*...*/},
off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {/*...*/},
emit<Key extends keyof Events>(type: Key, evt?: Events[Key]) {/*...*/}
};
}
unsetunset構建unsetunset
項目構建從 scripts 命令定義看起。
{
"scripts": {
// 運行 "typecheck", "lint", "mocha" 和 "test-types" 命令
"test": "npm-run-all --silent typecheck lint mocha test-types",
// 運行 "test" 目錄下的 mocha 測試
"mocha": "mocha test",
// 運行 TypeScript 編譯器,檢查 test/test-types-compilation.ts 文件的類型,但不生成任何輸出
"test-types": "tsc test/test-types-compilation.ts --noEmit --strict",
// 運行 ESLint 檢查 src 和 test 目錄下的 .ts 和 .js 文件
"lint": "eslint src test --ext ts --ext js",
// 運行 TypeScript 編譯器,檢查 TypeScript 代碼的類型,但不生成任何輸出
"typecheck": "tsc --noEmit",
// 使用 microbundle 將模塊打包成 ES、CommonJS 和 UMD 格式
"bundle": "microbundle -f es,cjs,umd",
// 運行 "clean", "bundle" 和 "docs" 命令
"build": "npm-run-all --silent clean -p bundle -s docs",
// 刪除 dist 目錄
"clean": "rimraf dist",
// 使用 documentation 工具生成 API 文檔
"docs": "documentation readme src/index.ts --section API -q --parse-extension ts",
// 運行 "build", "test" 命令,提交代碼,打標簽,推送到 Git 倉庫,發布到 npm
"release": "npm run -s build -s && npm t && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
}
}
常用工具和命令
npm-run-all:提供簡單的方式來運行多個 npm scripts 命令。如上面的 npm-run-all --silent typecheck lint mocha test-types 命令,將按照定義的順序依次運行。
其它參數:
- --silent:禁止輸出額外的信息,使輸出更簡潔
- -p:并行運行多個命令
- -s:指定一組任務按照順序依次執行
- rimraf:跨平臺的 Node.js 模塊,提供簡單的方式來刪除文件和目錄。它的作用類似于 Unix/Linux 系統中的 rm -rf 命令,但也可以在 Windows 系統中使用。
- npm t:npm test 的別名
測試
本庫使用 Mocha 寫測試,mocha test 命令會運行 mocha 測試,它會查找 test 目錄下的測試文件,并執行這些測試。
其配置在 package.json 中,將會被 mocha 命令讀取并應用到測試運行中:
{
"mocha": {
// 指定測試文件的擴展名為 ".ts"
"extension": [
"ts"
],
// 指定需要在測試運行前加載的模塊。這里指定了 "ts-node/register" 和 "esm" 模塊,它們分別用于支持 TypeScript 和 ES modules
"require": [
"ts-node/register",
"esm"
],
// 指定測試文件的位置,這里表示所有以 "_test.ts" 結尾的文件都會被作為測試文件運行
"spec": [
"test/*_test.ts"
]
},
}
并使用 Chai 和Sinon庫來進行單元測試。其中,Chai 提供了一組斷言函數,用于判斷測試結果是否符合預期,而 Sinon 則提供了一組用于創建測試所需的測試樁和測試樁驗證函數等工具函數。
Mocha
測試框架,可編寫和運行代碼測試。提供了簡單靈活的語法來定義測試用例,并且可以與各種斷言庫一起使用,以對代碼的行為進行斷言。 Mocha 可以在瀏覽器和 Node.js 環境中運行測試,并通過使用回調、Promises 和 async/await 實現異步測試。
Mocha 還具有豐富的功能,例如測試分組、測試跳過和測試覆蓋報告等。總的來說,Mocha 是一個確保 JavaScript 代碼質量和正確性的好工具。
類型檢測
tsc 是 TypeScript 的編譯器命令,用于將 TypeScript 代碼編譯為 JavaScript 代碼。--noEmit 是 tsc 命令的一個選項,表示編譯器不會將編譯后的 JavaScript 代碼寫入到文件中,而只會對代碼進行類型檢查和語法分析等操作。
這個選項通常用于在開發過程中進行類型檢查,而不生成任何實際的輸出文件。這可在開發過程中盡早地發現類型錯誤,從而減少調試時間和代碼錯誤。
--noEmit 選項并不會完全禁止 tsc 編譯器的輸出,它仍然會向終端輸出類型檢查和語法分析的結果。可以使用 --pretty false 選項完全禁止 tsc 編譯器的輸出。
eslint
eslint 采用在 package.json 內配置的方式(也可使用獨立的 .eslintrc 配置文件)。
{
"eslintConfig": {
// 指定一個或多個已有的ESLint配置文件,以便繼承其中的規則和選項
"extends": [
"developit",
// plugin: 表示對 @typescript-eslint 插件下的某一類配置對象的引用
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
// 專門用于解析 TypeScript 代碼的解析器
"parser": "@typescript-eslint/parser",
"parserOptions": {
// 要解析的代碼是 ES6 模塊
"sourceType": "module"
},
"env": {
"browser": true,
"mocha": true,
"jest": false,
"es6": true
},
// 指定了 expect 變量為全局變量,用于在測試中使用斷言庫
"globals": {
"expect": true
},
"rules": {
// ...
}
},
// 指定ESLint應該忽略的文件或目
"eslintIgnore": [
"dist",
"index.d.ts"
]
}
- extends:指定要使用的ESLint配置。
- parser:指定解析器。
- parserOptions:指定解析器的選項。
- env:指定代碼運行的環境。
- globals:指定全局變量。
- rules:指定要應用的規則。
其他 package.json 配置
以下屬性都是為了讓模塊可以在不同的環境下被正確地導入和使用,以提高模塊的可移植性和兼容性。同時,microbundle 打包時也可能用到其中的配置。
{
// 定義了 ES6 模塊規范的入口文件。當使用現代打包工具(如 webpack、Rollup 等)構建項目時,會自動使用這個屬性指定的文件作為入口,以支持 ES6 模塊的導入和導出。
"module": "dist/mitt.mjs",
// 定義了 CommonJS 規范的入口文件。當使用 Node.js 運行時或者其他支持 CommonJS 規范的環境時,會自動使用這個屬性指定的文件作為入口。
"main": "dist/mitt.js",
// 定義了 ES6 模塊規范的入口文件。這個屬性主要是為了向老版本的打包工具提供兼容性支持,因為老版本的打包工具不支持 module 屬性。
"jsnext:main": "dist/mitt.mjs",
// 定義了 UMD 規范的入口文件。當使用不支持 ES6 模塊或 CommonJS 規范的環境時,會自動使用這個屬性指定的文件作為入口。
"umd:main": "dist/mitt.umd.js",
// 定義了源代碼文件的入口。這個屬性通常用于調試和開發環境,因為它可以讓開發者在調試時直接跳轉到源代碼文件,而不是跳轉到編譯后的文件。
"source": "src/index.ts",
// 定義了 TypeScript 類型定義文件的路徑。這個屬性通常用于 TypeScript 項目,它告訴 TypeScript 編譯器在編譯時需要將這個文件作為類型定義文件使用。
"typings": "index.d.ts",
// 定義了模塊的導出方式。是可以指定多個導出方式的對象,包括 import、require、types 和 default。以便在不同的環境下使用不同的導出方式,以適應不同的場景。
"exports": {
"types": "./index.d.ts",
"import": "./dist/mitt.mjs",
"require": "./dist/mitt.js",
"default": "./dist/mitt.mjs"
},
// 用于指定哪些文件是該模塊的一部分,這些文件將會被打包到該模塊中,以便在其他項目中使用。
// 默認情況下,所有文件都會被打包到該模塊中,包括 node_modules 目錄和測試文件等。
"files": [
"dist",
"index.d.ts"
],
}
打包
本項目使用 microbundle 打包。microbundle 是一個零配置的 JavaScript 模塊打包工具,可以將 JavaScript 模塊打包成 CommonJS、ES modules 和 UMD 格式,從而可以在 Node.js 和瀏覽器環境中使用。
其特點是簡單易用,無需配置,只需要在命令行中運行 microbundle 命令即可進行打包。另外,它還支持一些常用的特性,比如壓縮、代碼分離等等。
在 microbundle -f es,cjs,umd 命令中,-f 參數用于指定打包的格式,可以同時指定多個格式,用逗號隔開。 在這個命令中,es 表示打包成 ES modules 格式,cjs 表示打包成 CommonJS 格式,umd 表示打包成 UMD 格式。
如果不指定 -f 參數,默認情況下 microbundle 會打包成 CommonJS 和 ES modules 格式。
提交/發布
release 上提供了提交代碼,打標簽,推送到 Git 倉庫,發布到 npm 等操作。
- git commit -am $npm_package_version:提交代碼,并使用當前版本號作為提交信息。
- git tag $npm_package_version:打標簽,并使用當前版本號作為標簽名
- git push: 推送代碼到 Git 倉庫
- git push --tags: 推送標簽到 Git 倉庫
- npm publish:發布包到 npm
$npm_package_version
是一個環境變量,它包含了當前項目的版本號。在 npm scripts 命令中,可以使用 $npm_package_version 來引用當前項目的版本號。這個環境變量是由 npm 在運行命令時自動設置的,無需手動設置。
unsetunsetGithub 工作流unsetunset
工作流用于在 GitHub 上進行持續集成(CI),配置文件放在 .github 目錄下。
.github/main.yml 文件在項目的 pull request 和 push 事件中觸發自動化構建和測試,配置如下:
# 定義名為 CI 的工作流
name: CI
on:
# 當有新的 pull request 提交時,且提交的分支名符合 ** 通配符模式時;
pull_request:
branches:
- "**"
# 當在 main 分支上進行 push 操作時。
push:
branches:
- main
jobs:
# 定義名為 build 作業(job)
build:
# 指定運行環境為 ubuntu-latest
runs-on: ubuntu-latest
# 定義步驟
steps:
# 使用 actions/checkout@v2 動作來檢出代碼庫
- uses: actions/checkout@v2
# 使用 actions/setup-node@v2 動作來安裝 Node.js 運行環境,指定版本為 14
- uses: actions/setup-node@v2
with:
node-version: 14
# 定義一個名為 npm install, build, and test 的步驟
- name: npm install, build, and test
# 包含以下命令
run: |
npm install
npm run build --if-present # 如果有定義 build 命令,則運行該命令,用于打包構建項目;
npm test
# 定義一個名為 CI 的環境變量,將其值設為 true
env:
CI: true
compressed-size.yml 工作流文件定義了一個名為 Compressed Size的工作流,主要使用 preactjs/compressed-size-action@v2 動作來計算代碼庫中指定文件的壓縮大小,pattern 參數用于指定要計算壓縮大小的文件路徑模式。
unsetunset文檔unsetunset
本庫的 API 文件使用 documentation 自動生成。
documentation 是一個 JavaScript 文檔生成工具,它可以根據代碼中的注釋自動生成文檔。它支持多種文檔格式,包括 HTML、Markdown、JSON 和 DocPad 等。
如上文定義的 docs 命令,"docs": "documentation readme src/index.ts --section API -q --parse-extension ts"。該命令的作用在 src/index.ts 文件中查找 API 部分的注釋(使用 --section API 參數),并將其轉換為 Markdown 格式的文檔輸出到控制臺(readme 參數)。其中,-q 參數表示以安靜模式運行,不輸出冗余信息,--parse-extension ts 參數表示解析 TypeScript 文件。
unsetunset總結unsetunset
mitt 是一個非常小巧、靈活的 JavaScript 事件管理庫,它的源碼非常簡潔。通過分析 mitt 的源碼,可以了解了它是如何實現事件管理的。