Skip to content

Шина событий

Если вам нужно, чтобы после определенного действия на сайте (например добавления товара в корзину) у вас сработал ваш скрипт (например высветил сообщение что у вас добавлен товар), то с этим вам поможет Шина событий (EventBus).

Для понимания, у шины событий есть 2 главных лица: Издатель (Pub) и Подписчик (Sub). Издатели генерируют любое событие (в том числе системное), а Подписчики цепляются к Издателю, чтобы запуститься после его запуска. Если разобрать пример выше, то Издателем будет добавление товара в корзину, а подписчиком будет ваш скрипт, который высвечивает сообщение о добавленном товаре.

Для подключения подписчика используется команда EventBus.subscribe( event_name, function (data)), где:

  • event_name - имя Издателя, на которое мы хотим подписаться.
  • data - данные от Издателя, которые мы хотим использовать (если нужно).

Для запуска издателя используется команда EventBus.publish( event_name, data ), где:

  • event_name - имя , для подключения подписчиков.
  • data - данные, которые мы хотим передать для последующей обработки подписчиками.

Пример подключения

/*Подключаем Подписчика №1*/

EventBus.subscribe('event1', function (data) {
  console.log('event1:', data);
});

/*Запускаем Издателя*/

EventBus.publish('event1', 'hello World!');
// -> event1:hello World!

/*Подключаем Подписчика №2*/

EventBus.subscribe('event1', function (data) {
  console.log(data, 'Let\'s rock');
})
// -> hello World!Let's rock

/*Запускаем Издателя*/

EventBus.publish('event1', 'hello Mars!');
// -> event1:hello Mars!
// -> hello Mars!Let's rock

Особенности работы

  • Издателям не важно, в каком месте кода написан подписчик, они все равно подцепятся и сработают.
  • К одному Издателю можно подключить сколько угодно подписчиков, сработают они по порядку написания

Работа со стандартными действиями на сайте (API)

Наиболее часто используемые действия пользователя в интернет-магазине, уже написаны в API и подключены как Издатели. Чтобы подключиться к ним (подписаться), нужно только написать имя Издателя (события)( например добавление товара в корзину забито как add_items:insales:cart) и в функции написать свой скрипт.

Выглядеть это будет примерно так:

EventBus.subscribe('add_items:insales:cart', function (data) {
console.log('add_items:insales:cart:', data);
});

Где data - это json обьект с данными о добавленном товаре (название, количество и т.д.), который отдается Издателем (в данном случае add_items:insales:cart).

Таким образом, мы можем реагировать на большинство стандартных событий в нашем Интернет-магазине при его срабатывании, или создать свое собственное событие, и подключать туда слушателей.