[面试] 手写题-eventBus

EventBus 本质上是一个 发布-订阅模式。它的作用是：
订阅事件（on）：存储回调函数，等待事件触发。
触发事件（emit）：当事件发生时，执行所有订阅的回调函数。
取消订阅（off）：移除指定的回调函数。
只触发一次（once）：回调函数执行一次后自动移除。

// 定义 EventBus 事件总线类
class EventBus {
    constructor() {//设置类实例的初始状态
        // 存储所有事件及其对应的回调函数列表
        this.eventObj = {};
    }
 
    //事件订阅(监听)，需要接收订阅事件名和对应的回调函数
    on(event, callback) {
        if (!this.eventObj[event]) {
            this.eventObj[event] = []; // 初始化该事件的回调数组
        }
        this.eventObj[event].push(callback); // 将回调函数添加到事件的数组中
    }
 
     // 触发事件(发布)，需要接收发布事件名和对应的参数
    emit(event, ...args) {
        if (this.eventObj[event]) {
            this.eventObj[event].forEach(cb=> cb(...args)); // 遍历回调数组，并执行每个回调函数，传入参数
        }
    }
 
      //取消订阅，需要移除的订阅事件名及指定的回调函数
    off(event, callback) {
        if (this.eventObj[event]) {
            this.eventObj[event] = this.eventObj[event].filter(cb => cb !== callback); // 过滤掉指定的回调函数
            if (this.eventObj[event].length === 0) { // 如果该事件的回调数组为空
                delete this.eventObj[event]; // 删除该事件
            }
        }
    }
 
     //添加单次订阅，触发一次订阅事件后取消订阅，需要添加的订阅事件名及指定的回调函数
    once(event, callback) {
        const onceCallback = (...args) => {
            callback(...args); // 先执行回调函数
            this.off(event, onceCallback); // 触发后立即移除监听
        };
        this.on(event, onceCallback); // 订阅带有自动移除功能的回调函数
    }
}

//基础测试
const eventBus = new EventEmitter()
eventBus.once("demo", (params) => { console.log(1, params) })
eventBus.on("demo", (params) => { console.log(2, params) })
eventBus.on("demo", (params) => { console.log(3, params) })
eventBus.emit("demo", "someData")

参考：
【JavaScript面试题】手写eventBus
手写EventBus （详解）

原文地址：https://blog.csdn.net/qq_14993591/article/details/149048220

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！