實現一個事件匯流排（vue.prototype.$bus）？

本質就是一個訂閱釋出模式的實現。

• 維護一個cache陣列，即訂閱者陣列
• 實現on函式，即增加訂閱者
• 實現off函式，即取消訂閱
• 實現emit函式，即釋出訊息，通知訂閱中心有更新

class EventBus {
    constructor() {
        this.cache = {};
    }
    on(name, fn) {
        if (this.cache[name]) {
            this.cache[name].push(fn);
        } else {
            this.cache[name] = [fn];
        }
    }
    off(name, fn) {
        const tasks = this.cache[name];
        if (tasks) {
            const index = tasks.findIndex((f) =>
                f === fn || f.callback === fn
            )
            if (index >= 0) {
                tasks.splice(index, 1);
            }
        }
    }

    emit(name) {
        if (this.cache[name]) {
            // 建立副本，如果回撥函式內繼續註冊相同事件，會造成死迴圈
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }
        }
    }

    emit(name, once = false) {
        if (this.cache[name]) {
            // 建立副本，如果回撥函式內繼續註冊相同事件，會造成死迴圈
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }

            if (once) {
                delete this.cache[name]
            }
        }
    }
}


const eventBus = new EventBus()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }
eventBus.on('task', task1)
eventBus.on('task', task2)

setTimeout(() => {
    eventBus.emit('task')
  }, 1000)

更多詳情可以看我部落格的另一篇筆記：《設計模式之觀察者模式——Js實現》