Зависимости: Underscore.js и jQuery

Backbone.js — это легковесный JavaScript-фреймворк, предназначенный для структурирования веб-приложений, и его работа невозможна без двух ключевых зависимостей: Underscore.js и jQuery. Понимание роли этих библиотек критично для правильного использования Backbone.

Underscore.js

Underscore.js предоставляет утилиты для работы с коллекциями, объектами, функциями и массивами. Backbone активно использует функции Underscore для упрощения внутренних операций, а также для расширения своих возможностей.

Основные моменты использования:

  • Функции работы с коллекциями: _.each, _.map, _.filter, _.reduce. Backbone модели и коллекции часто используют эти методы для обработки данных.

    var numbers = [1, 2, 3, 4];
var doubled = _.map(numbers, function(n) { return n * 2; });
// doubled = [2, 4, 6, 8]

  • Функции работы с объектами: _.extend, _.pick, _.omit. Используются для расширения объектов или выборки определённых полей.

    var defaults = {name: 'Unknown', age: 0};
var user = {name: 'Alice'};
var completeUser = _.extend({}, defaults, user);
// completeUser = {name: 'Alice', age: 0}

  • Функции функционального программирования: _.bind, _.debounce, _.throttle применяются для контроля контекста вызова и оптимизации работы событий.

Backbone активно интегрирует эти методы, предоставляя мощный и гибкий инструмент для манипуляции данными без необходимости писать собственные низкоуровневые функции.

jQuery

jQuery в Backbone используется в основном для работы с DOM и AJAX-запросами. Backbone не привязывает разработчика строго к jQuery, но предоставляет возможность использовать любую библиотеку с аналогичным API для работы с элементами и событиями.

Ключевые функции jQuery в контексте Backbone:

  • Манипуляции с DOM: метод $(selector) позволяет искать элементы для привязки View.

    var listItem = $('<li>').text('Пример');
$('#list').append(listItem);

  • События: Backbone View использует jQuery для делегирования событий через объект events.

    var ItemView = Backbone.View.extend({
  events: {
    'click .delete': 'removeItem'
  },
  removeItem: function() {
    this.remove();
  }
});

  • AJAX: Backbone модели используют jQuery AJAX для синхронизации данных с сервером через fetch, save, destroy.

    var user = new Backbone.Model({id: 1});
user.fetch(); // выполняется AJAX-запрос через jQuery

Взаимодействие Backbone с зависимостями

  • Модульность: Backbone не содержит встроенных функций для работы с массивами или AJAX. Все такие операции делегируются соответствующим библиотекам.
  • Расширяемость: Если заменить jQuery на другую библиотеку, совместимую с Backbone (например Zepto), большинство функций View и модели будут работать без изменений.
  • Минимизация кода: Использование Underscore.js и jQuery позволяет писать лаконичный и читаемый код без дублирования общих утилит.

Практическая рекомендация

Backbone.js предполагает, что Underscore.js подключен перед Backbone, а jQuery — до и Backbone. Порядок подключения критичен для корректной работы всех компонентов. Пример подключения через HTML:

<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>

Любые расширения Backbone, включая собственные View, Collection или Router, используют функции этих библиотек как фундамент, поэтому их отсутствие приведёт к ошибкам на этапе выполнения.

Итоговое взаимодействие

  • Underscore.js → базовые утилиты, функции работы с данными и контекстом.
  • jQuery → манипуляции с DOM и AJAX-запросы.
  • Backbone.js → каркас приложения, упрощающий работу с моделями, коллекциями, событиями и маршрутизацией, опираясь на возможности зависимостей.

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

Оглавление