本文的創作啟發來自於Vue中的EventBus(也有人叫中央事件匯流排)，全文系博主原創，轉載請標明出處，如有理解不當之處歡迎各位大佬賜教，謝謝！

本文程式碼秉承釋出訂閱模式的思想模擬實現了 Vue中的EvnetBus

那麼，上程式碼！

JS版

class Subscription {
    subscriptionStack = {};
    on(eventName, callBack) {
        if (this.subscriptionStack[eventName]) {
            this.subscriptionStack[eventName].callBacks.push(callBack);
            callBack(this.subscriptionStack[eventName].value);
        } else {
            console.error("該介面未註冊,請先通過emit方法註冊介面,再來監聽")
            return;
        }
    }
    emit(eventName, value) {
        if (this.subscriptionStack[eventName]) {
            Reflect.set(this.subscriptionStack[eventName], 'value', value);
        } else {
            const origin = {
                value,
                callBacks: []
            }
            const proxyHandle = {
                get(origin, key) {
                    return origin[key];
                },
                set(origin, key, value) {
                    if (key == 'value' && origin.callBacks.length) {
                        origin.callBacks.forEach(callBack => {
                            callBack(value);
                        })
                    }
                }
            }
            this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
        }
    }
}
 

Ts版

interface SubscriptionClassInterface {
  subscriptionStack: object;
  on(eventName: string, callBack: (val: any) => void): void;
  emit(eventName: string, value: any): void;
}

class Subscription implements SubscriptionClassInterface {
  subscriptionStack: object;
  on: (eventName: string, callBack: (val: any) => void) => void;
  emit: (eventName: string, value: any) => void;

  constructor() {
    this.subscriptionStack = {};

    this.on = (eventName: string, callBack: (val: any) => void) => {
      if (this.subscriptionStack[eventName]) {
        this.subscriptionStack[eventName].callBacks.push(callBack);
        callBack(this.subscriptionStack[eventName].value);
      } else {
        console.error("該介面未註冊,請先通過emit方法註冊介面,再來監聽");
        return;
      }
    };

    this.emit = (eventName: string, value: any) => {
      if (this.subscriptionStack[eventName]) {
        Reflect.set(this.subscriptionStack[eventName], "value", value);
      } else {
        const origin = {
          value,
          callBacks: [],
        };
        const proxyHandle = {
          get(origin, key): any {
            return origin[key];
          },
          set(origin, key, value): any {
            if (key == "value" && origin.callBacks.length) {
              origin.callBacks.forEach((callBack) => {
                callBack(value);
              });
            }
          },
        };
        this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
      }
    };
  }
}

 

使用方法：

第一步、

# 建立例項
let s = new Subscription();

第二步、

# 釋出事件
s.emit(事件名,值)
# 舉個栗子：
s.emit('change',20);

第三步、

# 訂閱事件
s.on(事件名,回撥函式)
> 此處的事件名一定要和emit中的對應上
# 舉個栗子：
s.on('change',function(val){
//emit中傳入的值在Val中接收到
//這裡可以寫入相應的邏輯程式碼
//每當再次呼叫emit這個回撥函式會被自動呼叫，完成響應式
})

------------------------- End -------------------------