Где лежит шина событий?
DOM и браузер
Шина событий (event bus) — это объект-посредник, через который компоненты обмениваются событиями, не зная друг о друге. Она «лежит» в общем модуле, доступном подписчикам и издателям.
Что это
Event bus реализует паттерн Publisher-Subscriber: издатели публикуют события в шину, подписчики их слушают. Шина — центральный объект с методами on/emit:
class EventBus {
#handlers = {};
on(event, cb) {
(this.#handlers[event] ??= []).push(cb);
}
emit(event, data) {
this.#handlers[event]?.forEach((cb) => cb(data));
}
}
export const eventBus = new EventBus(); // общий модульГде «лежит»
- В отдельном модуле — импортируется всеми, кому нужно (синглтон):
import { eventBus } from './eventBus';
eventBus.emit('user:login', user); // издатель
eventBus.on('user:login', handler); // подписчик- Может храниться в глобальном объекте, DI-контейнере, или как экземпляр фреймворка (Vue 2 использовал
new Vue()как шину).
Зачем нужна
Развязка компонентов: они общаются через шину, не имея прямых ссылок друг на друга.
Осторожно
- Легко создать «магические» неявные связи, трудно отследить поток.
- Не забывать отписываться (
off) — иначе утечки. - В React/Vue чаще предпочитают props/стейт-менеджеры для явности.
Коротко для собеседования
Шина событий (event bus) — объект-посредник для обмена событиями между компонентами по паттерну Pub/Sub (on/emit). «Лежит» в общем модуле-синглтоне, импортируемом издателями и подписчиками. Развязывает компоненты, но создаёт неявные связи — нужно отписываться. В React/Vue чаще предпочитают явные props/стейт.