這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中EventEmitter的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用10多年，服務(wù)更有保障！服務(wù)器租用，四川電信科技城機(jī)房 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

什么是 Event Emitter?

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

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

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

在這里，我們的目標(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)建一個(gè) EventEmiiter 類以及初始化 events 空對(duì)象屬性。這個(gè) events 屬性的目的是為了存儲(chǔ)我們的事件集合，這個(gè) events 對(duì)象使用事件名當(dāng)做 key，用訂閱者集合當(dāng)做 value。（可以把每個(gè)訂閱者看作是一個(gè)函數(shù)）。

訂閱函數(shù)

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

  this.events[eventName].push(fn);
}

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

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

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

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

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

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

使用上面的代碼能做我們所說(shuō)的全部的事情。但我們?nèi)匀挥幸粋€(gè)問(wèn)題。當(dāng)我們不再需要它們的時(shí)候，我們需要一種方法來(lái)取消注冊(cè)這些訂閱，因?yàn)槿绻悴贿@樣做，將造成內(nèi)存泄漏。

讓我們來(lái)解決這個(gè)問(wèn)題，通過(guò)在訂閱函數(shù)中返回一個(gè)取消注冊(cè)的方法。

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);
  }
}

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

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

unsubscribe();

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

和內(nèi)存泄露說(shuō)再見！??

你能運(yùn)行這份代碼，所有代碼都在這里。

html代碼

	


	
	

	Change name

js代碼

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

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

 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);
  }
 }


}

document.addEventListener("DOMContentLoaded", function (event) {
 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}`;
 });
});

關(guān)于“JavaScript中EventEmitter的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前題目：JavaScript中EventEmitter的示例分析-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/dpehei.html