面试题之实现EventBus

实现一个类，首先在 constructor 里找一个地方去存消息列队，直接用一个对象存,然后在 on 方法里去注册事件，其实就是把传进来的函数保存到消息列队里去,之后，在 emit 方法里去调用，如果有，直接把消息列队里的方法拿出来，执行，并且传入参数，如果没有，直接略过

<div id="btn">点击这里触发消息</div>
btn.onclick = function(){
     eventBus.emit('sendMsg', this.innerText);
}
eventBus.on('sendMsg', (msg) => {
     console.log(`订阅的消息是：${msg}`)
})

class EventBusClass {
    constructor() {
        this.msgList = {}
    }
    on(msgName, fn) {
        // this.msgList[msgName] = fn;
        // 首先判断消息是不是保存过
        if (this.msgList.hasOwnProperty(msgName)) {
            // 如果存在，看看是不是一个函数
            if (typeof this.msgList[msgName] === 'function') {
                // 如果是，则变成数组
                this.msgList[msgName] = [this.msgList[msgName], fn]
            } else {
                // 如果是，则需要再原有的数组上把新的函数保存进去
                this.msgList[msgName] = [...this.msgList[msgName], fn]
            }
        } else {
            // 如果消息名称在事件队列里不存在，直接存储
            this.msgList[msgName] = fn
        }
    }
    emit(msgName, msg) {
        // 先判断消息名称是否存在
        if (!this.msgList.hasOwnProperty(msgName)) {
            return
        }

        // this.msgList[msgName](msg);
        // 判断是函数还是数组
        if (typeof this.msgList[msgName] === 'function') {
            // 函数的话直接执行
            this.msgList[msgName](msg)
        } else {
            this.msgList[msgName].map((fn) => {
                // 如果是数组，则需把数组取出来挨个执行
                fn(msg)
            })
        }
    }

    off(msgName) {
        if (!this.msgList.hasOwnProperty(msgName)) {
            return
        }
        delete this.msgList[msgName];
    }
}
const eventBus = new EventBusClass()
window.eventBus = eventBus