Пользовательские события

Backbone.js строится вокруг событийной модели, которая позволяет компонентам приложения взаимодействовать без жёсткой связки друг с другом. Пользовательские события — ключевой механизм для организации обмена сообщениями между моделями, коллекциями, представлениями и любыми другими объектами.

В основе лежит модуль Backbone.Events, который может быть примешан к любому объекту. Он предоставляет универсальный интерфейс для регистрации, генерации и управления событиями.

Backbone.Events как примесь

Backbone.Events — это не класс, а набор методов, которые добавляются объекту через примешивание:

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

После этого объект получает методы:

  • on
  • off
  • trigger
  • once
  • listenTo
  • stopListening

Это позволяет использовать событийную модель вне стандартных сущностей Backbone.

Регистрация пользовательских событий

Метод on

Метод on подписывает обработчик на событие:

model.on('custom:event', function(value) {
    console.log(value);
});

Особенности:

  • Имя события — произвольная строка
  • Один обработчик может быть привязан к нескольким событиям
  • Контекст выполнения можно передать третьим аргументом
model.on('change update reset', handler, this);

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

Метод trigger

Событие инициируется методом trigger:

model.trigger('custom:event', 42);

Все аргументы после имени события передаются обработчикам.

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

Контекст и управление жизненным циклом

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

По умолчанию this внутри обработчика указывает на объект-источник события. Это поведение можно изменить:

model.on('custom:event', handler, view);

В этом случае this внутри handler будет указывать на view.

Однократные события

Метод once

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

model.once('initialized', function() {
    console.log('Сработает один раз');
});

После первого срабатывания обработчик автоматически удаляется.

Отписка от событий

Метод off

Метод off удаляет подписки:

model.off('custom:event', handler);

Возможные варианты:

  • Удаление конкретного обработчика
  • Удаление всех обработчиков события
  • Полная очистка всех событий объекта
model.off();

Неправильное использование off может привести к трудноотлавливаемым ошибкам, особенно в больших приложениях.

Связанные подписки и управление памятью

Метод listenTo

listenTo решает проблему утечек памяти, когда объекты подписываются друг на друга:

view.listenTo(model, 'custom:event', viewHandler);

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

  • Подписка хранится на стороне слушающего объекта
  • Упрощается централизованное управление отписками

Остановка прослушивания

Метод stopListening

Удаляет все подписки, созданные через listenTo:

view.stopListening();

Или только для конкретного объекта:

view.stopListening(model);

Это особенно важно в методе remove у Backbone.View, чтобы корректно освобождать ресурсы.

Пользовательские события в моделях

Модели Backbone уже используют события (change, sync, destroy), но пользовательские события расширяют поведение:

var User = Backbone.Model.extend({
    login: function() {
        this.trigger('user:login', this);
    }
});

Такие события позволяют:

  • Изолировать бизнес-логику
  • Реагировать на действия модели без переопределения стандартных методов
  • Избежать жёстких зависимостей между компонентами

Пользовательские события в коллекциях

Коллекции также поддерживают пользовательские события:

users.trigger('users:loaded', users.length);

Типичные сценарии:

  • Уведомление о завершении асинхронной загрузки
  • Сигналы о групповых изменениях
  • Логирование и аналитика

Пользовательские события в представлениях

В Backbone.View пользовательские события часто применяются для внутренней коммуникации:

var View = Backbone.View.extend({
    initialize: function() {
        this.trigger('view:ready');
    }
});

Это позволяет:

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

Событийные шины (Event Bus)

Распространённый паттерн — выделение отдельного объекта для глобальных событий:

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

Использование:

EventBus.trigger('app:start');
EventBus.on('app:start', handler);

Такой подход:

  • Упрощает взаимодействие между несвязанными компонентами
  • Повышает модульность
  • Требует строгой дисциплины именования событий

Именование пользовательских событий

Рекомендуется использовать пространства имён:

'user:login'
'cart:item:add'
'view:rendered'

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

  • Снижение риска конфликтов
  • Повышение читаемости
  • Удобство поиска по коду

Цепочки событий и композиция логики

События могут инициировать другие события:

model.on('validated', function() {
    model.trigger('ready');
});

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

Ошибки и подводные камни

Частые проблемы:

  • Подписка без последующей отписки
  • Анонимные обработчики, которые невозможно удалить
  • Избыточное использование глобальной шины событий
  • Сложные цепочки событий без явной документации

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

Расширение событийной системы

Любой объект может стать источником событий:

function Service() {}
_.extend(Service.prototype, Backbone.Events);

Это позволяет:

  • Создавать сервисные слои
  • Инкапсулировать асинхронную логику
  • Строить реактивные модули без UI-зависимостей

Роль пользовательских событий в архитектуре Backbone

Пользовательские события — основной инструмент слабой связанности в Backbone.js. Они заменяют прямые вызовы методов, обеспечивают масштабируемость и упрощают тестирование. Грамотное использование Backbone.Events позволяет строить сложные интерфейсы, оставаясь в рамках простой и предсказуемой модели.

Оглавление