JavaScript EventEmitter 背后的秘密完整版

(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )

什么是 Event Emitter"htmlcode">

let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h1 = document.querySelector("h1");

button.addEventListener("click", () => {
  emitter.emit("event:name-changed", { name: input.value });
});

let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
  h1.innerHTML = `Your name is: ${data.name}`;
});

让我们开始。

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

我们先创建一个 EventEmiiter 类以及初始化 events 空对象属性。这个 events 属性的目的是为了存储我们的事件集合，这个 events 对象使用事件名当做 key，用订阅者集合当做 value。（可以把每个订阅者看作是一个函数）。

订阅函数

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

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

这个订阅函数获取事件名称，在我们之前的例子中，它是 "event:name-changed" 以及传入一个回调，当有人调用 emit（或尖叫）事件的时候调用回调。

在 JavaScript 函数的优点之一是函数是第一对象，所以我们能像之前我们的订阅方法一样，通过函数作为另一个函数的参数。

如果未注册这个事件，我们需要在第一次为它设置一个初始值，事件名称作为 key 以及初始化一个空数组赋值给它，然后我们将函数放入这个数组，以便我们想通过 emit 去调用这个事件。

调用函数

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

这个调用函数接受事件名，这个事件名是我们想“呼叫”的名称，以及我们想传递给这个事件的数据。如果在我们的 events 中存在这个事件，我们将带上数据循环调用所有订阅的方法。

使用上面的代码能做我们所说的全部的事情。但我们仍然有一个问题。当我们不再需要它们的时候，我们需要一种方法来取消注册这些订阅，因为如果你不这样做，将造成内存泄漏。

让我们来解决这个问题，通过在订阅函数中返回一个取消注册的方法。

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 函数是第一对象，你能在一个函数中返回一个函数。因此现在我们能调用这个取消注册函数，如下：

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

unsubscribe();

当我们调用取消注册函数的时候，我们删除的功能依赖于对订阅函数集合的筛选方法（Array filter）。

和内存泄露说再见！"htmlcode">

<!DOCTYPE html>
<html>
<head>
	<script src="/UploadFiles/2021-04-02/script.js">

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 h1 = document.querySelector('h1');

 button.addEventListener('click', () => {
  emitter.emit('event:name-changed', { name: input.value });
 });

 let emitter = new EventEmitter();
 emitter.subscribe('event:name-changed', data => {
  h1.innerHTML = `Your name is: ${data.name}`;
 });
});



注：这份代码可能需要翻墙或者特别慢，所以我放到了  上，大家可以下载EventEmitter-jb51.rar。
原文出自：https://medium.com/@NetanelBasal/javascript-the-magic-behind-event-emitter-cce3abcbcef9#.nzgbagnxe

上一篇：理解 JavaScript EventEmitter
下一篇：vue的diff算法知识点总结

JavaScript EventEmitter 背后的秘密 完整版

订阅函数

调用函数

JavaScript EventEmitter 背后的秘密完整版