Observer JS: Empowering Your JavaScript with Observables

Observer в JavaScript - это паттерн проектирования, который предоставляет механизм для отслеживания изменений объектов и оповещения об этих изменениях других объектов, которые на них подписаны.

Паттерн Observer состоит из двух ключевых элементов: наблюдаемого объекта (subject) и наблюдателей (observers). Наблюдаемый объект содержит список наблюдателей и методы для добавления, удаления и оповещения наблюдателей. Когда наблюдаемый объект изменяется, он оповещает всех своих наблюдателей об этом изменении, вызывая у них соответствующие методы.

Давайте рассмотрим пример кода, чтобы лучше понять, как работает паттерн Observer:

javascript
// Наблюдаемый объект
class Subject {
  constructor() {
    this.observers = []; // список наблюдателей
    this.state = 0; // состояние объекта
  }
  // Методы для добавления и удаления наблюдателей
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }
  // Метод для оповещения всех наблюдателей
  notify() {
    for (const observer of this.observers) {
      observer.update(this.state);
    }
  }
  // Метод для изменения состояния и оповещения наблюдателей
  setState(state) {
    this.state = state;
    this.notify();
  }
}
// Наблюдатель
class Observer {
  constructor(name) {
    this.name = name;
  }
  // Метод, вызываемый при обновлении состояния наблюдаемого объекта
  update(state) {
    console.log(`${this.name} получил обновление. Новое состояние: ${state}`);
  }
}
// Создание наблюдаемого объекта и наблюдателей
const subject = new Subject();
const observer1 = new Observer('Наблюдатель 1');
const observer2 = new Observer('Наблюдатель 2');
// Подписка наблюдателей на изменения наблюдаемого объекта
subject.subscribe(observer1);
subject.subscribe(observer2);
// Изменение состояния наблюдаемого объекта
subject.setState(1);
// Вывод в консоль:
// Наблюдатель 1 получил обновление. Новое состояние: 1
// Наблюдатель 2 получил обновление. Новое состояние: 1
// Отписка наблюдателя observer2 от изменений наблюдаемого объекта
subject.unsubscribe(observer2);
// Изменение состояния наблюдаемого объекта
subject.setState(2);
// Вывод в консоль:
// Наблюдатель 1 получил обновление. Новое состояние: 2

В данном примере у нас есть наблюдаемый объект `Subject`, который содержит два наблюдателя `Observer`. Наблюдатели подписываются на изменения наблюдаемого объекта с помощью метода `subscribe()`. При изменении состояния наблюдаемого объекта вызывается метод `notify()`, который оповещает всех наблюдателей об этом изменении, вызывая у них метод `update()`. Наблюдатели могут выполнять какую-то логику в методе `update()` в зависимости от полученного состояния.