一、什么是事件總線

自定義事件總線屬于一種觀察者模式，其中包括三個角色：

• 發布者（Publisher）：發出事件（Event）；
• 訂閱者（Subscriber）：訂閱事件（Event），并且會進行響應（Handler）；
• 事件總線（EventBus）：無論是發布者還是訂閱者都是通過事件總線作為中臺的；

當然我們可以選擇一些第三方的庫：

• Vue2默認是帶有事件總線的功能；
• Vue3中推薦一些第三方庫，比如mitt；

二、手寫實現事件總線

當然我們也可以實現自己的事件總線：

• 事件的監聽方法on：存儲對應事件名需要執行的事件函數
• 事件的發射方法emit：執行對應事件名需要執行的事件函數
• 事件的取消監聽off：刪除對應事件名需要執行的事件函數
  
  運行結果：
  

// eventBus對象： // { // abc: [ // {需要監聽的函數, 為需要監聽的事件函數綁定的this}, // {需要監聽的函數, 為需要監聽的事件函數綁定的this} // ] // } class EventBus {constructor() {this.eventBus = {}}/** on函數：* 被調用時，需要把eventCallback和thisArg放到一個對象中，然后把這個對象push到一個數組里，* 然后把eventName作為key,把這個數組作為value存到eventBus對象中* eventName：需要監聽的事件名稱* eventCallback：需要監聽的事件函數* thisArg：為需要監聽的事件函數綁定this*/on(eventName, eventCallback, thisArg) {let handlers = this.eventBus[eventName]if (!handlers) {// 如果在eventBus對象中找不到key為eventName的handlers，// 則創建一個handlers空數組，并放到eventBus對象中handlers = []this.eventBus[eventName] = handlers}// 如果handlers存在，則把需要監聽的eventCallback函數、函數需要綁定的this// 以對象的形式存到handlers中handlers.push({eventCallback,thisArg})}/** emit函數：* 一旦被調用，則需要執行eventBus對象中key為eventName所對應的的數組中* 的每個對象中的eventCallback函數*/emit(eventName, ...payload) {// 獲取eventBus對象中key為eventName所對應的的數組const handlers = this.eventBus[eventName]if (!handlers) return// 如果數組存在則遍歷數組，調用需要執行的事件函數handlers.forEach(handler => {handler.eventCallback.apply(handler.thisArg, payload)})}/** off函數：* 被調用時，刪除eventBus中key為eventName，* value為一個handler對象,且該對象中的eventCallback屬性與off函數第二個參數相等的這個value對象*/off(eventName, eventCallback) {// 獲取eventBus對象中key為eventName所對應的的數組const handlers = this.eventBus[eventName]if (!handlers) return// 復制handlers，然后使用newHandlers新數組來進行遍歷，確保遍歷的數組是始終保持不變的// 防止出現后續刪除某個handlers數組中的對象后，在進行遍歷時出現問題const newHandlers = [...handlers]// 遍歷newHandlersfor (let i = 0; i < newHandlers.length; i++) {// 獲取newHandlers中的每個handlerconst handler = newHandlers[i]// 如果handler的eventCallback 等于 參數中傳進來的eventCallback，// 則獲取到這個handler對象在handlers數組中的下標，然后刪除這個handler對象if (handler.eventCallback === eventCallback) {const index = handlers.indexOf(handler)handlers.splice(index, 1)}}} }// 以下為測試代碼： const eventBus = new EventBus()// main.js文件 eventBus.on('abc', function (payload) {console.log('監聽abc事件', this, payload) }, {name: 'zep'})const handleCallback = function (payload) {console.log('監聽abc事件', this, payload) } eventBus.on('abc', handleCallback, {name: 'lala'})// utils.js文件 eventBus.emit('abc', 123)eventBus.off('abc', handleCallback) eventBus.emit('abc', 123) 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的手写实现简单的Vue事件总线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。