Джедайские приемы на JavaScript: магические свойства транслятора событий

О чем мы?

Event Emitter можно перевести как «транслятор» или «эмиттер» событий. Звучит как название штуки, умеющей генерировать событие, которое может «услышать» кто угодно.

Представьте себе такую схему: в вашем асинхронном коде определенный участок может «крикнуть» остальным, что он выполнил свою задачу, а другие части «услышат» этот сигнал и примут соответствующие меры.

Event Emitter — это шаблон, который можно реализовать разными способами. Основная идея в том, чтобы грамотно создать основу для управления событиями и реализовать возможность любым элементам «подписаться» на него (и быть в курсе происходящего). С другими шаблонами проектирования вы можете познакомиться в нашей статье.

Уже интересно, как такая магия может работать? Итак, мы хотим добиться кода, который затем можно будет использовать так:

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 = {};
  }
}

Как видите, конструктор нашего класса будет инициализировать поле events, пока что делая его пустым объектом. Задача этого поля — хранить события, «подписавшиеся» на нас (то есть в нем будут храниться функции).

Метод subscribe:

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

Этот метод принимает в качестве аргументов название события (например, event:name-changed, как в нашем примере) и функцию, которая будет вызываться, когда будет инициироваться транслируемое событие.

Одна из ключевых особенностей функций в JavaScript состоит в том, что функции — это этакие «объекты первого класса», то есть мы можем передать функцию в качестве параметра другой функции, как в методе subscribe().

Метод emit:

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

Этот метод принимает имя события, которое мы хотим всем транслировать, и данные, которые будут отправляться в момент этого события. Если в экземпляре класса сохранены какие-то подписанные на него события, мы проходимся по каждому из них и вызываем каждое, передавая ему данные, которые хотим транслировать.

Собственно, с реализацией паттерна мы закончили. Но пока остается одна проблема: нам нужно будет «отписать» функции, которые нам больше не нужны. Не сделаем этого — столкнемся с утечкой памяти.

Давайте решим эту проблему. Пусть метод subscribe() возвращает функцию unsubscribe(), которую позже можно будет использовать, чтобы отписаться от события.

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 особенные функции — их легко можно вернуть из другой функции. Теперь метод subscribe() можно использовать следующим образом:

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

unsubscribe();

Вызывая сохраненную в переменной функцию unsubscribe(), мы отписываемся от события.

Вот и все. Пока-пока, утечки памяти!

Вот тут можно попробовать весь получившийся код в действии.

Источник: Medium