Наблюдатель
Вопрос
Паттерн «наблюдатель»: что это и где он во фронтенде?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
субъект хранит список подписчиков и уведомляет их об изменении
подписчики не знают друг о друге и о деталях субъекта
во фронтенде: EventEmitter, addEventListener, подписка на стор
useSyncExternalStore - штатный способ подписаться из React
обязательна отписка, иначе утечка
минус: неявный поток управления, трудно проследить цепочку
Что могут спросить следом
- Как написать EventEmitter с методом once
- Зачем нужен useSyncExternalStore
- Чем наблюдатель отличается от паттерна «издатель-подписчик»
Разбор
Субъект держит список подписчиков и при изменении состояния вызывает их. Подписчики независимы и ничего не знают о внутренностях субъекта.
Во фронтенде он повсюду: addEventListener, EventEmitter в Node, store.subscribe
в Redux, реактивность в MobX, WebSocket-клиенты. В React есть штатный мост -
useSyncExternalStore, который корректно подписывает компонент на внешний источник
с учётом конкурентного рендера.
Обязательная часть контракта - возможность отписаться: подписка без отписки держит и слушателя, и всё, что он замкнул.
Минус паттерна - неявный поток управления: по коду не видно, кто среагирует на событие, и отладка превращается в поиск подписчиков по всему проекту.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.