如何從 function 而不是 window 調度事件

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 比爾正在尋找這個問題的更詳細的答案：

我想知道如何使用功能組件而不是使用 class

以下工作正常，我的事件偵聽器獲取自定義事件，因為它從 window 分派了事件，並且我的事件偵聽器正在偵聽 window 上的loading ，一切都很好。

const MyLib = mylib();
  function mylib() {
    const res = {
      init: (data) => {
        let loading = new CustomEvent('loading', {detail: { loading: true }});
        window.dispatchEvent(loading);
      }
    }
  return res;
}

事件監聽器

 window.addEventListener('loading', handleLoading);

如何將其更改為MyLib.addEventListener而不是window.addEventListener ？

和..

window.dispatchEvent(loading); 到MyLib.dispatchEvent(loading);

我得到的錯誤是TypeError: MyLib.addEventListener is not a function

下面的答案適用於 class，但我想知道不使用 class 是否可行。

Answer 1

可以使用代理來實現要求。

這是一個將原始 MyLib object 包裝在Proxy中的片段，在訪問addEventListener或dispatchEvent時會激活其get陷阱。

function mylib() {
  const res = {
    init: (data) => {
      let loading = new CustomEvent('loading', {detail: { loading: true }});
      MyLib.dispatchEvent(loading);
    }
  }
  return res;
}

const MyLib = new Proxy(mylib(), {
  get: function(target, prop) {
    if (prop === `addEventListener`) {
      return (...args) => window.addEventListener(...args);
    } 
    if (prop === `dispatchEvent`) {
      return (...args) => window.dispatchEvent(...args);
    }
    return target[prop];
  }
});

MyLib.addEventListener('loading', () => { console.log("Hello world !!!") });
MyLib.init();

Answer 2

為了在 object 上調度和監聽事件，object 需要從EventTarget接口繼承。

class MyLib extends EventTarget {
    constructor() {
        super();
    }

    init(data) {
        let loading = new CustomEvent('loading', { detail: { loading: true } });
        this.dispatchEvent(loading);
    }
}

// somewhere myLib is an instantiation of MyLib

useEffect(() => {
    myLib.addEventListener('loading', handleLoading);
    return () => {
        myLib.removeEventListener('loading', handleLoading);
    };
}, []);