PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Где лежит шина событий?

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/стейт.

Другие вопросы раздела