Система событий Backbone.Events

Система событий в Backbone реализована через миксин Backbone.Events и предназначена для организации слабосвязного взаимодействия между частями приложения. Она решает задачу оповещения об изменениях состояния без прямых зависимостей между объектами. Механизм событий используется повсеместно: в моделях, коллекциях, представлениях и пользовательских объектах.

Backbone.Events — это не класс, а набор методов, которые могут быть примешаны к любому объекту. Все ключевые компоненты Backbone уже используют этот миксин, что делает событийную модель единообразной во всём фреймворке.

Примешивание Backbone.Events

Миксин добавляется к объекту через _.extend:

var obj = {};
_.extend(obj, Backbone.Events);

После этого объект получает полный набор методов для работы с событиями. Такой подход позволяет использовать событийную модель вне стандартных компонентов Backbone, например, для создания централизованного event bus.

Регистрация обработчиков: on

Метод on используется для подписки на событие:

obj.on('change', function() {
    console.log('Событие change сработало');
});

Поддерживаются следующие особенности:

  • Несколько событий через пробел:

    obj.on('add remove', handler);

  • Контекст выполнения:

    obj.on('change', handler, this);

Контекст особенно важен при работе с представлениями, где обработчик должен выполняться в контексте экземпляра View.

Одноразовые обработчики: once

Метод once регистрирует обработчик, который будет вызван только один раз:

obj.once('sync', function() {
    console.log('Событие sync произошло один раз');
});

После первого срабатывания обработчик автоматически удаляется. Внутренне Backbone оборачивает функцию и отслеживает факт вызова.

Генерация событий: trigger

Метод trigger инициирует событие и передаёт данные обработчикам:

obj.trigger('update', 42, { status: 'ok' });

Аргументы передаются в обработчик в том же порядке. Backbone не накладывает ограничений на количество и тип аргументов.

Снятие подписок: off

Метод off удаляет обработчики. Возможны разные варианты использования:

  • Удаление конкретного обработчика:

    obj.off('change', handler);

  • Удаление всех обработчиков события:

    obj.off('change');

  • Полная очистка всех событий:

    obj.off();

Корректное использование off критично для предотвращения утечек памяти, особенно при динамическом создании и уничтожении представлений.

Связывание объектов: listenTo и stopListening

Методы listenTo и stopListening предназначены для управления подписками между объектами с учётом их жизненного цикла.

this.listenTo(model, 'change', this.render);

Преимущества listenTo:

  • Подписки автоматически отслеживаются текущим объектом.
  • Достаточно вызвать stopListening(), чтобы снять все связанные подписки.
  • Упрощается уничтожение представлений.

Пример корректного освобождения ресурсов:

remove: function() {
    this.stopListening();
    Backbone.View.prototype.remove.call(this);
}

Именованные события и неймспейсы

Backbone не поддерживает неймспейсы событий напрямую, но соглашения об именовании позволяют структурировать события:

obj.trigger('user:login');
obj.trigger('user:logout');

Такой подход облегчает чтение кода и снижает риск конфликтов имён.

Специальное событие “all”

Событие all срабатывает при любом trigger:

obj.on('all', function(eventName) {
    console.log('Произошло событие:', eventName);
});

Первым аргументом всегда передаётся имя события. Использование all оправдано для логирования или отладки, но в прикладной логике требует осторожности из-за потенциального влияния на производительность.

События в моделях

Backbone.Model активно использует событийную систему. Наиболее важные события:

  • change — модель изменилась
  • change:attribute — изменился конкретный атрибут
  • destroy — модель удалена
  • sync — успешная синхронизация с сервером
  • error — ошибка при запросе

Пример:

model.on('change:title', function(model, value) {
    console.log('Новое значение title:', value);
});

События change срабатывают только после завершения всех изменений, что позволяет безопасно реагировать на согласованное состояние модели.

События в коллекциях

Backbone.Collection генерирует события при работе с моделями:

  • add
  • remove
  • reset
  • sort
  • update

Пример:

collection.on('add', function(model) {
    console.log('Добавлена модель', model.id);
});

Коллекция автоматически проксирует события моделей, добавленных в неё, что позволяет отслеживать изменения без ручной подписки на каждую модель.

События в представлениях

Backbone.View использует Backbone.Events для внутренних механизмов и пользовательских сценариев. Часто применяется в сочетании с DOM-событиями:

events: {
    'click .btn': 'onClick'
}

DOM-события и пользовательские события существуют параллельно и не конфликтуют между собой. Представление может генерировать собственные события для внешних компонентов:

this.trigger('submitted', this.model);

Event bus как архитектурный элемент

Отдельный объект с примешанным Backbone.Events часто используется как глобальная шина событий:

var vent = _.extend({}, Backbone.Events);

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

Внутренняя реализация и особенности

Backbone хранит события во внутреннем объекте _events, где ключ — имя события, а значение — массив обработчиков. Каждый обработчик содержит:

  • функцию
  • контекст
  • ссылку на исходную функцию (для once)

Эта структура обеспечивает:

  • быстрый доступ
  • корректное удаление обработчиков
  • поддержку сложных сценариев подписки

Ограничения и типичные ошибки

  • Отсутствие off или stopListening при уничтожении объектов.
  • Использование анонимных функций без возможности их удаления.
  • Слишком общие события (change вместо change:attr).
  • Избыточное использование глобального event bus.

Событийная система Backbone проста по API, но требует дисциплины в использовании. При корректной архитектуре она обеспечивает гибкость, масштабируемость и читаемость кода без дополнительных библиотек и сложных паттернов.

Оглавление