JavaScript高级事件总线

秦书翔

已于 2023-03-03 19:43:05 修改

阅读量288

点赞数

分类专栏： JavaScript 高级文章标签： javascript 前端 vue.js

于 2023-03-03 18:55:08 首次发布

本文链接：https://blog.youkuaiyun.com/ximing020714/article/details/129325652

版权

JavaScript 高级专栏收录该内容

27 篇文章

订阅专栏

文章介绍了自定义事件总线的概念，它基于观察者模式，涉及发布者、订阅者和事件总线三个角色。在Vue3中，推荐使用mitt作为事件管理库。示例展示了如何创建和使用一个简单的事件总线类XEventBus，以及在组件间的事件监听和触发。此外，还提到了通过setTimeout清理事件监听的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义事件总线属于一种观察者模式，其中包括三个角色

发布者（Publisher）：发出事件（Event）；
订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；
事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；

当然我们可以选择一些第三方的库，Vue3中推荐一些第三方库，比如mitt

// 类EventBus -> 事件总线对象
class XEventBus {
    constructor() {
        this.eventMap = {}
    }

    on(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) {
            eventFns = []
            this.eventMap[eventName] = eventFns
        }
        eventFns.push(eventFn)
    }
    

    off(eventName, eventFn) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        for (let i = 0; i < eventFns.length; i++) {
            const fn = eventFns[i]
            if (fn === eventFn) {
                eventFns.splice(i, 1)
                break
            }
        }

        // 如果eventFns已经清空了
        if (eventFns.length === 0) {
            delete this.eventMap[eventName]
        }
    }

    emit(eventName, ...args) {
        let eventFns = this.eventMap[eventName]
        if (!eventFns) return
        eventFns.forEach(fn => {
            fn(...args)
        })
    }
}

调用方式

// 使用过程
const eventBus = new XEventBus()

// aside.vue组件中监听事件
eventBus.on("navclick", (name, age, height) => {
    console.log("navclick listener 01", name, age, height)
})

const click = () => {
    console.log("navclick listener 02")
}
eventBus.on("navclick", click)

setTimeout(() => {
    eventBus.off("navclick", click)
}, 5000);

eventBus.on("asideclick", () => {
    console.log("asideclick listener")
})


// nav.vue
const navBtnEl = document.querySelector(".nav-btn")
navBtnEl.onclick = function () {
    console.log("自己监听到")
    eventBus.emit("navclick", "why", 18, 1.88)
}