奇技淫巧之釋出訂閱模式

班主任發表於2019-10-08
  • 別的不多說,上去就是擼!

let event {
    // 事件列表
    list: [],
    
    // 訂閱事件
    on(key, fn) {
        // 判斷是否已有該事件型別
        if (!this.list[key]) {
            thhis.list[key] = [];
        }
        // 將訂閱的事件引用儲存到該型別的事件陣列中
        this.list[key].push(fn);
    },
    // 釋出事件
    emit() {
        // 獲取引數列表中第一個引數(獲取事件型別的引用)
        const args = Array.from(arguments);
        let key = args.shift();
        const fnsList = this.list[key]; // 獲取該型別的所有事件
        // 該事件型別不存在,返回false
        if (!fnsList || fnsList.length === 0) {
            return false;
        }
        // 執行該型別的所有事件
        fnsList.forEach(fn => {
            fn.apply(this, args);
        });
    },
    // 取消訂閱
    remove(key, fn) {
        // 找到key型別的事件列表
        const fnsArray = this.list[key];
        // 如果沒有該型別事件。返回false
        if (!fnsArray) {
            return false;
        }
        // 清空key型別的所有事件
        if (!fn) { // 當不傳fn時,表示清除所有key型別的事件
            fnsArray && (fns.length = 0);
        } else { // 清除指定型別的指定事件
            fnsArray.forEach((currentFn, index) => {
                if (currentFn === fn) {
                    fnsArray.splice(index, 1);
                }
            });
        }
    }
};
複製程式碼

相關文章