事件总线(eventBus)思想与代码实现

最新推荐文章于 2023-04-24 14:10:25 发布

橙柚007

最新推荐文章于 2023-04-24 14:10:25 发布

阅读量381

点赞数 1

分类专栏： Angular 文章标签： javascript 前端 vue.js angular

本文链接：https://blog.csdn.net/weixin_44240648/article/details/127213108

版权

Angular 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件总线

文章目录

事件总线

1. 解决问题

实现组件间的远程通信，避免多重嵌套组件传递问题

2. 实现思想

定义一个对象结构 {eventName1: [eventFn1, eventFn2]，eventName2: [eventFn1, eventFn2]}

定义事件监听：将需要监听的函数以上述结构存入对象中

//eventBus是该对象，存在该对象结构eventMap
//on方法就是将事件名称、绑定函数， 存入该对象结构中
eventBus.on("navbutton", (name, age, height) => {
        console.log("navbutton01", name, age, height);
    });

定义事件发送：通过emit方法进行事件发送，触发对应的监听函数

const button01 = document.querySelector(".but");
    button01.onclick = function (params) {
        console.log("按钮点击");
        //通过eventBus对象中emit传入eventName进行事件发送，触发监听函数
        eventBus.emit("navbutton","why", 18, 1.88);
    }

总结：将监听事件放入特定的数据结构中，通过emit方法，查询到特定函数进行触发

3. 实现代码

        class HTEventBus {
            constructor() {
                this.eventMap = {};
            }
            // 事件监听
            on(eventName, eventFn) {
            	//通过事件名 获取到存储函数的数组
                let eventFns = this.eventMap[eventName];
                //如果没有，建立一个空数组，再将函数push进去
                if (!eventFns) {
                    eventFns = [];
                    this.eventMap[eventName] = eventFns;
                }
                eventFns.push(eventFn);
            };
            // 事件发送
            emit(eventName, ...args) {
            	//通过事件名获取到对应的 函数数组
                let eventFns = this.eventMap[eventName];
                //如果没有就返回，如果有 就调用该数组中的所有函数
                if (!eventFns) return;
                eventFns.forEach(fn => {
                    fn(...args);
                });
            };
            // 事件移除
            off(eventName, eventFn) {
                let eventFns = this.eventMap[eventName];
                if (!eventFns) return;
                this.eventMap[eventName] = eventFns.filter(fn => fn !== eventFn);
                // for (let index = 0; index < eventFns.length; index++) {
                //     if(eventFns[index] === eventFn) {
                //         eventFns.splice(index, 1);
                //         break;
                //     }
                    
                // }
            }
        }

4. 使用方法

        const eventBus = new HTEventBus();
        eventBus.on("navbutton", (name, age, height) => {
            console.log("navbutton01", name, age, height);
        });
        const click =  () => console.log("navbutton02");
        eventBus.on("navbutton", click);
        setTimeout(() => {
            eventBus.off("navbutton", click);
        }, 5000);
        // eventBus.on("link", () => {
        //     console.log("navbutton02");
        // });
        const button01 = document.querySelector(".but");
        button01.onclick = function (params) {
            console.log("按钮点击");
            eventBus.emit("navbutton","why", 18, 1.88);
        }