Подключение Backbone.js к проекту

Backbone.js — легковесный JavaScript-фреймворк, предназначенный для построения структурированных клиентских приложений. Он предоставляет основные элементы архитектуры MVC (Model, View, Collection, Router), позволяя организовать код и управлять состоянием приложения. Для работы с Backbone.js необходимо корректно подключить библиотеку и её зависимости.

Подключение зависимостей

Backbone.js имеет две обязательные зависимости:

Underscore.js — библиотека с утилитами для работы с коллекциями, объектами и функциями. Backbone активно использует функции Underscore, такие как _.extend, _.each, _.map.
jQuery или Zepto — библиотека для работы с DOM, AJAX и событиями. Backbone использует её для манипуляций с элементами страницы и синхронизации с сервером через Backbone.sync.

Порядок подключения критически важен: сначала Underscore, затем jQuery, затем Backbone.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.5.0/backbone-min.js"></script>

Установка через npm

Для современных проектов, использующих сборщики модулей (Webpack, Parcel, Vite), удобнее устанавливать Backbone через npm:

npm install backbone underscore jquery

В коде можно импортировать библиотеки следующим образом:

import Backbone from 'backbone';
import _ from 'underscore';
import $ from 'jquery';

// Подключение jQuery к Backbone
Backbone.$ = $;

Инициализация Backbone

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

console.log(Backbone.VERSION); // Проверка версии
console.log(Backbone.$);       // Проверка подключения jQuery
console.log(_);                // Проверка подключения Underscore

Организация структуры проекта

Для удобства и масштабируемости проекта рекомендуется структурировать код по типу MVC:

/project
  /models
  /collections
  /views
  /routers
  /templates
  index.html
  main.js

models/ — хранение логики данных, определение моделей через Backbone.Model.
collections/ — набор моделей через Backbone.Collection.
views/ — представления, работа с DOM через Backbone.View.
routers/ — маршрутизация URL через Backbone.Router.
templates/ — HTML-шаблоны для рендеринга.

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

<script src="js/models/user.js"></script>
<script src="js/collections/users.js"></script>
<script src="js/views/userView.js"></script>
<script src="js/routers/appRouter.js"></script>
<script src="js/main.js"></script>

Backbone с шаблонизатором

Backbone не имеет собственного шаблонизатора, поэтому часто используется Underscore шаблоны:

<script type="text/template" id="user-template">
  <div class="user">
    <h2><%= name %></h2>
    <p>Возраст: <%= age %></p>
  </div>
</script>

Применение шаблона в Backbone.View:

const UserView = Backbone.View.extend({
  template: _.template($('#user-template').html()),

  render() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

const user = new Backbone.Model({ name: 'Иван', age: 30 });
const userView = new UserView({ model: user });
$('#app').html(userView.render().el);

Использование модуля `Backbone.$`

Backbone использует объект $ для всех операций с DOM и AJAX. После импорта jQuery его необходимо назначить:

Backbone.$ = $;

Это позволяет использовать методы типа this.$el внутри View и функции Backbone.sync для работы с сервером.

Подключение Backbone в сборщиках модулей

Для ES-модулей порядок импорта и экспорта важен:

// main.js
import $ from 'jquery';
import _ from 'underscore';
import Backbone from 'backbone';

Backbone.$ = $;

import AppRouter from './routers/appRouter.js';

const router = new AppRouter();
Backbone.history.start();

Backbone автоматически отслеживает изменения URL и маршруты, что делает его совместимым с современными SPA-приложениями.