Что такое Observer

1️⃣ Как кратко ответить

Observer — это поведенческий паттерн проектирования, который определяет зависимость типа "один ко многим" между объектами, так что при изменении состояния одного объекта все зависимые от него объекты уведомляются и обновляются автоматически.

2️⃣ Подробное объяснение темы

Observer (Наблюдатель) — это паттерн проектирования, который используется для создания системы, где объекты могут подписываться на события, происходящие в других объектах, и получать уведомления об этих событиях. Это позволяет объектам взаимодействовать между собой, не зная деталей реализации друг друга, что способствует слабой связанности системы.

Зачем нужен Observer

В веб-разработке часто возникает необходимость в том, чтобы один объект мог уведомлять другие объекты о произошедших изменениях. Например, в пользовательском интерфейсе изменение данных в модели должно автоматически обновлять представление, чтобы пользователь видел актуальную информацию. Observer позволяет реализовать такую функциональность.

Как работает Observer

Observer состоит из двух основных компонентов:

• Subject (Субъект): объект, за которым наблюдают. Он хранит список наблюдателей и уведомляет их об изменениях.
• Observer (Наблюдатель): объект, который подписывается на изменения в субъекте и получает уведомления.

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

Рассмотрим пример на JavaScript, где у нас есть объект Subject, который уведомляет подписчиков о своих изменениях.

// Класс Subject, который хранит состояние и список наблюдателей
class Subject {
  constructor() {
    this.state = 0; // Начальное состояние
    this.observers = []; // Список наблюдателей
  }
​
  // Метод для добавления наблюдателя
  addObserver(observer) {
    this.observers.push(observer);
  }
​
  // Метод для удаления наблюдателя
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
​
  // Метод для уведомления всех наблюдателей об изменении состояния
  notifyObservers() {
    this.observers.forEach(observer => observer.update(this.state));
  }
​
  // Метод для изменения состояния
  setState(state) {
    this.state = state;
    this.notifyObservers(); // Уведомляем всех наблюдателей
  }
}
​
// Класс Observer, который подписывается на изменения в Subject
class Observer {
  constructor(name) {
    this.name = name;
  }
​
  // Метод, который вызывается при изменении состояния Subject
  update(state) {
    console.log(`${this.name} notified of state change: ${state}`);
  }
}
​
// Создаем субъект
const subject = new Subject();
​
// Создаем наблюдателей
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
​
// Добавляем наблюдателей в субъект
subject.addObserver(observer1);
subject.addObserver(observer2);
​
// Изменяем состояние субъекта
subject.setState(1); // Оба наблюдателя будут уведомлены о новом состоянии

Объяснение кода

• Класс Subject: хранит текущее состояние и список наблюдателей. Методы addObserver и removeObserver управляют списком наблюдателей. Метод notifyObservers проходит по списку наблюдателей и вызывает их метод update, передавая текущее состояние. Метод setState изменяет состояние и вызывает notifyObservers.

• Класс Observer: представляет наблюдателя, который подписывается на изменения в Subject. Метод update вызывается, когда Subject изменяет свое состояние.

• Создание объектов: создается объект Subject и два объекта Observer. Наблюдатели добавляются в список наблюдателей Subject. При изменении состояния Subject все наблюдатели получают уведомление через метод update.

Observer позволяет создавать гибкие и расширяемые системы, где компоненты могут взаимодействовать без жесткой зависимости друг от друга. Это особенно полезно в сложных интерфейсах, где изменения в одном компоненте должны автоматически отражаться в других.