事件总线

1. 解决问题

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

2. 实现思想

1. 定义一个 对象结构 {eventName1: [eventFn1, eventFn2]，eventName2: [eventFn1, eventFn2]}
2. 定义事件监听：将需要监听的函数以上述结构存入对象中

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

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

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

4. 总结：
   
   将监听事件放入特定的数据结构中，通过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);
        }