关于前端:EventBus-在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()