Web accessibility principles

Backbone.js представляет собой легковесный JavaScript-фреймворк для создания одностраничных приложений, обеспечивающий организацию кода через модели, коллекции, виды и маршрутизаторы. Он не навязывает строгую архитектуру, но предоставляет инструменты для структурирования данных и логики приложения.

Модели (Models)

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

Создание модели:

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    },
    toggle: function() {
        this.set('completed', !this.get('completed'));
    }
});

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

  • Defaults — значения по умолчанию для атрибутов.
  • Getter/Setter — get() и set() позволяют безопасно работать с атрибутами.
  • События — change, destroy, sync позволяют отслеживать изменения модели.

Модели можно сохранять на сервере через save() и удалять через destroy(). Для работы с REST API Backbone использует синхронизацию через Backbone.sync.

Коллекции (Collections)

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

Пример коллекции:

var Tasks = Backbone.Collection.extend({
    model: Task,
    completed: function() {
        return this.filter(function(task) {
            return task.get('completed');
        });
    }
});

Особенности коллекций:

  • Поддержка событий (add, remove, reset) для обновления интерфейса при изменении данных.
  • Методы фильтрации и поиска (filter, find, where) упрощают обработку наборов моделей.
  • Возможность привязки к REST API для автоматической загрузки данных через fetch().

Представления (Views)

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

Создание представления:

var TaskView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#task-template').html()),
    events: {
        'click .toggle': 'toggleCompleted',
        'click .delete': 'removeTask'
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    toggleCompleted: function() {
        this.model.toggle();
    },
    removeTask: function() {
        this.model.destroy();
    }
});

Ключевые принципы работы с View:

  • tagName, className, id позволяют задавать структуру DOM.
  • events связывает DOM-события с методами представления.
  • listenTo обеспечивает реакцию на изменения моделей и коллекций без утечек памяти.

Маршрутизаторы (Routers)

Маршрутизатор Backbone.js обеспечивает управление состоянием приложения через URL. Он позволяет создавать одностраничные приложения с поддержкой истории браузера.

Пример маршрутизатора:

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'tasks/:id': 'showTask'
    },
    home: function() {
        console.log('Главная страница');
    },
    showTask: function(id) {
        console.log('Показ задачи с id:', id);
    }
});

Особенности маршрутизации:

  • Использование routes для определения паттернов URL и связанных функций.
  • Метод navigate() позволяет программно изменять URL и запускать обработчики.
  • Поддержка pushState для современного управления историей без перезагрузки страницы.

События и реактивность

События Backbone.js — основной механизм связывания данных и интерфейса. Все ключевые объекты (Models, Collections, Views) реализуют Backbone.Events.

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

  • on(event, callback) — подписка на событие.
  • off(event, callback) — отписка.
  • trigger(event) — генерация события.

Такой подход обеспечивает реактивность без привязки к конкретной библиотеке рендеринга.

Интеграция с REST API

Backbone.js удобно работает с серверными данными через REST. Методы моделей и коллекций автоматически выполняют AJAX-запросы:

  • fetch() — получение данных с сервера.
  • save() — создание или обновление записи на сервере.
  • destroy() — удаление записи.

Можно переопределять url или urlRoot для кастомных путей и добавлять обработку ошибок через колбэки success и error.

Работа с шаблонами

Backbone.js не навязывает конкретную систему шаблонов. Чаще всего используют Underscore.js для быстрого рендеринга:

var template = _.template('<h1><%= title %></h1>');
var html = template({ title: 'Задача 1' });
  • <%= %> — вывод с экранированием HTML.
  • <%- %> — вывод без экранирования.
  • <% %> — логика (условия, циклы).

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

Связь компонентов

Backbone.js строит приложение через строгую, но гибкую связку компонентов:

  1. Модель управляет данными.
  2. Коллекция группирует модели.
  3. Представление отображает модели и реагирует на события.
  4. Маршрутизатор управляет навигацией.

Такой подход обеспечивает высокую модульность и упрощает поддержку больших приложений.

Расширение функциональности

Backbone.js легко расширяется плагинами и сторонними библиотеками:

  • Backbone.Marionette — улучшение управления представлениями и жизненным циклом.
  • Backbone.localStorage — хранение данных в локальном хранилище браузера.
  • Backbone.Validation — валидация атрибутов модели.

Использование расширений помогает строить сложные приложения, не теряя простоты и гибкости оригинального фреймворка.

Оглавление