Приведу пример простейшего API корзины интернет-магазина, а для событий используем уже имеющуюся «шину» — элемент body.
function add(item_id, quantity) {
$.ajax({
type: "POST",
url: "/api/cart/add",
dataType: 'json',
data: {item_id: item_id, quantity: quantity}
}).done(function (data) {
$('body').trigger('QuantityChanged', [data.item_id, data.quantity]);
$('body').trigger('PriceChanged', [data.item_id, data.sum]);
});
};
Теперь после добавления товара отправляется два события: изменилось количество, изменилась цена. Можно было бы реализовать это и одним событием с большим количеством параметров, но так лучше не делать: если слушателю события интересно только изменение цены, нет нужды передавать ему и все остальные тридцать три параметра. Это повышает шанс ошибки и ведет к неразберихе в коде. События должны быть предельно атомарными, чтобы и слушателей можно было делать небольшими, выполняющими лишь одну роль — но хорошо. Можно также расширить количество событий, добавив, например, своё событие для ошибки, начала запроса и т.д.
/**
* Обновить количество товара в корзине
*/
$('body').on('QuantityChanged', function (e, item_id, quantity) {
$('[data-item-quantity="' + item_id + '"]').html(quantity);
});
/**
* Обновить цену товара в корзине
*/
$('body').on('PriceChanged', function (e, item_id, sum) {
$('[data-item-sum="' + item_id + '"]').html(sum);
});
Никто теперь не мешает нам расширить систему, добавив на какой-то отдельной странице дополнительное действие при добавлении товара в корзину. И это всё без изменения API, без изменения старых событий и без условных операторов.