EventBus概要

EventBus是消息傳遞的一種方式，基于一個消息中心，訂閱和發布消息的模式。這種方式的實現不僅僅局限于前端，在iOS中的消息消息中心也是如此實現。

1. 設計模式：訂閱者發布者模式，這種設計模式在前端很常見。

2. API的設計：

   2.1 只能構造一個消息對象

   2.2 on('msgName', func)訂閱消息，msgName:訂閱的消息名稱 func: 訂閱的消息

   2.3 one('msgName', func)僅訂閱一次消息，后訂閱的會替換前面訂閱的消息

   2.4 emit('msgName', msg)發布消息 msgName:消息名稱 msg：發布的消息

   2.5 off('msgName')移除消息

實現EventBus

// 構造EventBus
function EventBusClass() {
    this.msgQueues = {}
}

EventBusClass.prototype = {
    // 將消息保存到當前的消息隊列中
    on: function(msgName, func) {
        if (this.msgQueues.hasOwnProperty(msgName)) {
            if (typeof this.msgQueues === 'function') {
                this.msgQueues[msgName] = [this.msgQueues[msgName], func]               
            } else {
                this.msgQueues[msgName] = [...this.msgQueues[msgName], func]    
            }
        } else {
            this.msgQueues[msgName] = func;
        }
    },
    // 消息隊列中僅保存一個消息
    one: function(msgName, func) {
        // 無需檢查msgName是否存在
        this.msgQueues[msgName] = func;
    },
    // 發送消息
    emit: function(msgName, msg) {
        if (!this.msgQueues.hasOwnProperty(msgName)) {
            return
        }
        if (typeof this.msgQueues[msgName] === 'function') {
            this.msgQueues[msgName](msg)
        } else {
            this.msgQueues[msgName].map((fn) => {
                fn(msg)
            })
        }
    },
    // 移除消息
    off: function(msgName) {
        if (!this.msgQueues.hasOwnProperty(msgName)) {
            return
        }
        delete this.msgQueues[msgName]
    }
}

// 將EventBus放到window對象中
const EventBus = new EventBusClass()
window.EventBus = EventBus

使用EventBus

// 訂閱消息
function subscribe() {
    EventBus.on('first-event', function(msg) {
        alert(`訂閱的消息是：${msg}`);
    });
}

// 發送消息
function emit() {
    const msgInput = document.getElementById("msgInputId")
    EventBus.emit('first-event', msgInput.value)
}

// 移除消息
function off(msgName) {
    EventBus.off(msgName)
}

CodePen預覽

-----可能需要翻墻-----

CodePen EventBus的實現 by avg

總結

整個EventBus主要部分是分為三個部分。消息中心，訂閱事件方法，發布消息方法。雖然不能和Vue中實現的那么全面，但麻雀雖小，五臟俱全。缺少的部分在于對數據安全性的校驗。希望給你一個實現的思路