EventBus 在vue的實現

老毛發表於2022-04-16
Vue
接上篇文章，因為Vue3中已經移除例項的$on，$off方法，這次來實現一個EventBus小工具，把它封裝成一個類方便呼叫。

單例模式

一個vue應用中，我們只需要這個類的單例模式來管理事件，所以它應該是下面的樣子：

class Listener {
    constructor() {
        this.name = "Listener"
        this.store = {}
    }

    static getInstance() {
        if (!Listener.instance) {
            Listener.instance = new Listener()
        }
        return Listener.instance
    }

    /**
     * 同一個事件可多次註冊，可能觸發時執行多次
     * @param evtName
     * @param cb
     */
    $on(evtName, cb) {
        if (typeof cb !== 'function') {
            console.error(`[${this.name}] can't listen event:${evtName}, cb is not a function`)
            return
        }
        if (!(evtName in this.store)) {
            this.store[evtName] = []
        }
        this.store[evtName].push(cb)
        console.log(`[${this.name}] listen on event:${evtName}, cb: ${cb.name}`)
    }

    $emit(evtName, ...data) {
        if (evtName in this.store) {
            this.store[evtName].forEach(cb => {
                cb(...data)
            })
        } else {
            console.error(`[${this.name}] could not found event:${evtName}`)
        }
    }

    /**
     * 解除安裝一個事件，如果沒有傳入cb會被所有cb都清除
     * @param evtName
     * @param cb
     */
    $off(evtName, cb) {
        if (evtName in this.store) {
            if (cb) {
                const index = this.store[evtName].indexOf(cb)
                if (index > -1) {
                    this.store[evtName].splice(index, 1)
                    console.log(`[${this.name}] remove event:${evtName} cb: ${cb.name}`)
                }
                return
            }
            delete this.store[evtName]
            console.log(`[${this.name}] deleted event:${evtName}`)
            return null
        }
        console.warn(`[${this.name}] event:${evtName} not exist`)
    }
}

export const VueListener = {
    install: (Vue) => {
        Vue.prototype.$listener = Listener.getInstance()
    }
}

export const MyListener = Listener.getInstance()

從程式碼尾部匯出可以看出，我們既可以把它當成vue外掛使用，也可以當成一個js庫使用。

npm 安裝

為了方便安裝使用，我已經把它釋出到了npm官方網站，可以直接新增到專案依賴使用即可 listener_leo

npm i listener_leo --save
// or
yarn add listener_leo

使用方法：

import Vue from 'vue'
import VueListener from 'listener_leo'

Vue.use(VueListener)

這樣就可以在元件中使用了：

this.$listener.$emit()
this.$listener.$on()
this.$listener.$off()

相關文章