JavaScript 釋出-訂閱設計模式實現 React EventBus(相當於vue的$Bus)非父子之間通訊

2023-04-18 12:00:48

提前宣告: 我沒有對傳入的引數進行及時判斷而規避錯誤,僅僅對核心方法進行了實現;

解決了react的非父子間的通訊;

參考檔案:https://github1s.com/browserify/events/blob/main/events.js

                 https://www.npmjs.com/package/events

                 https://github.com/browserify/events

                 

1.其中的一種實現的方式   

 

首先先新建一個檔案eventBus.tsx

class EventBus {
  constructor() {
    this.events = this.events || new Map(); // 儲存事件/回撥鍵值對
    this.maxListeners = this.maxListeners || 10; // 設立監聽上限
  }

  // 觸發名為type的事件
  emit(type, ...args) {
    let handler = null;
    handler = this.events.get(type);
    console.log('