Обзёрвер (наблюдатель) как патерн JavaScript

Паттерн Observer является одним из популярнейших паттернов, используемых в сайтостроении. Объект хранит коллекцию наблюдателей и оповещает их об изменениях состояния.

Представим практический сценарий: необходимо одновременно обновлять несколько элементов при наступлении события — например, при вводе текста в поле input. Для этого создаётся функциональность подписки и отписки для управления получением обновлений состояния.

Класс Observable

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(f) {
    this.observers.push(f);
  }

  unsubscribe(f) {
    this.observers = this.observers.filter(subscriber => subscriber !== f);
  }

  notify(data) {
    this.observers.forEach(observer => observer(data));
  }
}

Пример использования

Создаём экземпляр наблюдателя, подписываем на него несколько функций обновления и запускаем оповещение при каждом нажатии клавиши:

const input = document.querySelector('.js-input');
const p1 = document.querySelector('.js-p1');
const p2 = document.querySelector('.js-p2');
const p3 = document.querySelector('.js-p3');

const updateP1 = text => p1.textContent = text;
const updateP2 = text => p2.textContent = text;
const updateP3 = text => p3.textContent = text;

const headingsObserver = new Observable();

headingsObserver.subscribe(updateP1);
headingsObserver.subscribe(updateP2);
headingsObserver.subscribe(updateP3);

input.addEventListener('keyup', e => {
  headingsObserver.notify(e.target.value);
});

Данная упрощённая реализация паттерна может избежать необходимости в крупных фреймворках (Vue, React, Angular). Для углублённого изучения рекомендуется книга «Шаблоны в JavaScript» Эдди Асмани.