Шаблон наблюдателя в Typescript — это шаблон проектирования программного обеспечения, в котором объект, известный как субъект, поддерживает список своих зависимых объектов (наблюдателей) и уведомляет их о любых изменениях состояния.

Короче говоря, Observer разделяет отправителей и получателей.

Каковы варианты использования для:

  1. Пользовательские интерфейсы: в контексте пользовательских интерфейсов могут быть случаи, когда несколько компонентов требуют обновлений в ответ на изменения в состоянии другого компонента.
  2. Обработка событий: в контексте обработки событий могут возникнуть ситуации, когда несколько объектов должны быть проинформированы о возникновении события, такого как нажатие кнопки.
  3. Разработка игр. В контексте разработки игр могут возникать ситуации, когда нескольким объектам требуется уведомление об изменениях состояния другого объекта, например об изменении счета или состояния игры.

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

class Post {
    private subscribers: User[];
    private state: string;

    constructor(state: string) {
        this.subscribers = [];
        this.state = state;
    }

    subscribe(user: User) {
        this.subscribers.push(user);
    }

    setState(state: string) {
        this.state = state;
        this.notifySubscribers();
    }

    private notifySubscribers() {
        this.subscribers.forEach(user => user.notify(this));
    }
}

class User {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    notify(post: Post) {
        console.log(`User ${this.name} has been notified of a change to the post: ${post.state}`);
    }
}

const post = new Post("Initial state");
const user1 = new User("John");
const user2 = new User("Jane");

post.subscribe(user1);
post.subscribe(user2);

post.setState("Updated state");

// Output:
// User John has been notified of a change to the post: Updated state
// User Jane has been notified of a change to the post: Updated state

Класс Post действует как субъект в шаблоне и поддерживает список подписчиков в массиве подписчиков. Метод setState обновляет состояние сообщения и уведомляет всех подписчиков с помощью метода notifySubscribers. Класс User представляет наблюдателя и имеет метод уведомления, который выводит сообщение на консоль, когда пользователь уведомляется об изменении публикации.

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

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