Event emitter監(jiān)聽事件的示例分析

這篇文章主要介紹了Event emitter監(jiān)聽事件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

什么是 Event Emitter?

Event emitter 聽起來只是觸發(fā)一個事件，這個事件任何東西都能監(jiān)聽。

想象一下這樣的場景，在你的異步代碼中，去“呼叫”一些事件的發(fā)生，以及讓你其他部分都要聽到你的“呼叫”并且注冊他們的想法。

為了不同的目的，對于 Event Emitter 模式有大量不同的實現(xiàn)，但是基本的想法是為了給一個框架提供事件的管理以及能夠去訂閱他們。

在這里，我們的目標(biāo)創(chuàng)建屬于我們自己的 Event Emitter 去理解背后的秘密。所以，讓我們看一下下面的代碼是怎么工作的。

let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h2 = document.querySelector("h2");
button.addEventListener("click", () => {
  emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
  h2.innerHTML = `Your name is: ${data.name}`;
});

讓我們開始。

class EventEmitter {
  constructor() {
    this.events = {};
  }
}

我們先創(chuàng)建一個 EventEmiiter 類以及初始化 events 空對象屬性。這個 events 屬性的目的是為了存儲我們的事件集合，這個 events 對象使用事件名當(dāng)做 key，用訂閱者集合當(dāng)做 value。（可以把每個訂閱者看作是一個函數(shù)）。

訂閱函數(shù)

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
}

這個訂閱函數(shù)獲取事件名稱，在我們之前的例子中，它是 "event:name-changed" 以及傳入一個回調(diào)，當(dāng)有人調(diào)用 emit（或尖叫）事件的時候調(diào)用回調(diào)。

在 JavaScript 函數(shù)的優(yōu)點之一是函數(shù)是第一對象，所以我們能像之前我們的訂閱方法一樣，通過函數(shù)作為另一個函數(shù)的參數(shù)。

如果未注冊這個事件，我們需要在第一次為它設(shè)置一個初始值，事件名稱作為 key 以及初始化一個空數(shù)組賦值給它，然后我們將函數(shù)放入這個數(shù)組，以便我們想通過 emit 去調(diào)用這個事件。

調(diào)用函數(shù)

emit(eventName, data) {
  const event = this.events[eventName];
  if (event) {
    event.forEach(fn => {
      fn.call(null, data);
    });
  }
}

這個調(diào)用函數(shù)接受事件名，這個事件名是我們想“呼叫”的名稱，以及我們想傳遞給這個事件的數(shù)據(jù)。如果在我們的 events 中存在這個事件，我們將帶上數(shù)據(jù)循環(huán)調(diào)用所有訂閱的方法。

使用上面的代碼能做我們所說的全部的事情。但我們?nèi)匀挥幸粋€問題。當(dāng)我們不再需要它們的時候，我們需要一種方法來取消注冊這些訂閱，因為如果你不這樣做，將造成內(nèi)存泄漏。

讓我們來解決這個問題，通過在訂閱函數(shù)中返回一個取消注冊的方法。

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
  return () => {
    this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
  }
}

因為 JavaScript 函數(shù)是第一對象，你能在一個函數(shù)中返回一個函數(shù)。因此現(xiàn)在我們能調(diào)用這個取消注冊函數(shù)，如下：

let unsubscribe = emitter.subscribe("event:name-changed", data => console.log(data));
unsubscribe();

當(dāng)我們調(diào)用取消注冊函數(shù)的時候，我們刪除的功能依賴于對訂閱函數(shù)集合的篩選方法（Array filter）。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Event emitter監(jiān)聽事件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!