Что такое Backbone.js

Backbone.js — это легковесный JavaScript-фреймворк, разработанный для создания структурированных клиентских веб-приложений. Он обеспечивает минимальный набор инструментов для организации кода, позволяя разделять данные, логику и отображение. Основные компоненты Backbone.js — это Models, Collections, Views, Routers и Events.

Models

Model представляет собой объект данных и бизнес-логику приложения. Каждый объект Model инкапсулирует данные и предоставляет методы для их управления.

Основные свойства и методы Model:

  • attributes — объект, содержащий данные модели.
  • get(attr) — получение значения атрибута.
  • set(attr, value) — установка значения атрибута с возможностью отслеживания изменений.
  • toJSON() — возвращает данные модели в виде JSON.
  • save() — отправка данных на сервер через синхронизацию.
  • fetch() — загрузка данных с сервера.
  • destroy() — удаление модели на сервере и удаление из коллекции.

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

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    },
    validate: function(attrs) {
        if (!attrs.title) return "Title is required";
    }
});

var task = new Task({ title: "Learn Backbone" });
task.set({ completed: true });

Collections

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

Ключевые методы Collection:

  • add(model) — добавление модели.
  • remove(model) — удаление модели.
  • get(id) — поиск модели по идентификатору.
  • fetch() — загрузка коллекции с сервера.
  • reset(models) — сброс коллекции с новым набором моделей.
  • each(callback) — перебор всех моделей коллекции.
var TaskList = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

var tasks = new TaskList();
tasks.add(new Task({ title: "Write tutorial" }));

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

Views

View управляет отображением данных и взаимодействием с пользователем. Она связывает модель или коллекцию с HTML-разметкой и реагирует на события.

Основные элементы View:

  • el — DOM-элемент, с которым работает view.
  • events — объект, связывающий DOM-события с методами view.
  • render() — метод для отрисовки содержимого.
  • initialize() — метод, вызываемый при создании view, часто используется для подписки на события модели или коллекции.
var TaskView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click .toggle': 'toggleCompleted'
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function() {
        this.$el.html(this.model.get('title'));
        return this;
    },
    toggleCompleted: function() {
        this.model.set('completed', !this.model.get('completed'));
    }
});

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

Routers

Router отвечает за маршрутизацию URL и навигацию внутри одностраничного приложения. Он позволяет связывать адреса с действиями.

Основные методы Router:

  • routes — объект, связывающий маршруты с методами.
  • navigate(fragment, options) — изменение URL без перезагрузки страницы.
  • start() — запуск маршрутизатора и отслеживание изменений хеша URL.
var AppRouter = Backbone.Router.extend({
    routes: {
        'tasks/:id': 'showTask',
        'about': 'showAbout'
    },
    showTask: function(id) {
        console.log("Showing task " + id);
    },
    showAbout: function() {
        console.log("About page");
    }
});

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

Маршрутизатор позволяет создавать динамические и удобные для пользователя URL без перезагрузки страницы.

Events

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

Основные методы Events:

  • on(event, callback) — подписка на событие.
  • off(event, callback) — удаление подписки.
  • trigger(event, args) — вызов события с аргументами.
  • listenTo(object, event, callback) — подписка на событие другого объекта с автоматическим управлением памятью.
var task = new Task({ title: 'Learn Events' });
task.on('change', function() {
    console.log('Task changed:', task.toJSON());
});
task.set({ completed: true });

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

Синхронизация с сервером

Backbone.js поддерживает RESTful API через метод sync. По умолчанию:

  • fetch() выполняет GET-запрос.
  • save() выполняет POST или PUT.
  • destroy() выполняет DELETE.

Эта интеграция позволяет строить клиентские приложения, которые автоматически взаимодействуют с серверной частью без дополнительного кода для AJAX-запросов.

Архитектурные преимущества

Backbone.js способствует:

  • Разделению логики и отображения через строгую структуру Models, Views и Collections.
  • Повторному использованию кода благодаря модульности компонентов.
  • Упрощению маршрутизации и управления состоянием с помощью Router.
  • Реактивности интерфейса через Events и привязку к изменениям данных.

Backbone.js остаётся актуальным инструментом для построения легковесных и масштабируемых веб-приложений, где важна строгая структура кода и простота интеграции с серверной логикой.

Оглавление