Создание базовой структуры проекта

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

Организация файловой структуры

Рекомендуемая структура проекта Backbone.js:

/project-root
│
├── index.html
├── app/
│   ├── models/
│   │   └── task.js
│   ├── collections/
│   │   └── tasks.js
│   ├── views/
│   │   ├── taskView.js
│   │   └── tasksView.js
│   ├── routers/
│   │   └── appRouter.js
│   ├── templates/
│   │   └── taskTemplate.html
│   └── app.js
├── lib/
│   ├── backbone.js
│   ├── underscore.js
│   └── jquery.js
└── css/
    └── style.css

Ключевые моменты структуры:

  • models/ — описываются отдельные объекты данных, их свойства и логика.
  • collections/ — группы моделей, обеспечивающие итерацию, фильтрацию и синхронизацию с сервером.
  • views/ — компоненты интерфейса, отвечающие за отображение данных и взаимодействие с пользователем.
  • routers/ — управление маршрутизацией и изменением состояния приложения без перезагрузки страницы.
  • templates/ — хранение HTML-шаблонов, которые подставляются в Views.
  • lib/ — сторонние библиотеки, Backbone.js, Underscore.js, jQuery.
  • app.js — точка входа, инициализация приложения.

Модели (Models)

Models описывают структуру данных и бизнес-логику. Они поддерживают атрибуты, события и валидацию. Пример создания модели:

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    },
    validate: function(attrs) {
        if (!attrs.title) {
            return "Заголовок задачи не может быть пустым";
        }
    }
});

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

  • defaults задает стандартные значения атрибутов.
  • validate проверяет корректность данных перед изменением.
  • Модели могут вызывать события при изменении состояния: change, destroy, sync.

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

Collections группируют модели и предоставляют методы для работы с множеством объектов:

var Tasks = Backbone.Collection.extend({
    model: Task,
    url: '/tasks'
});

Ключевые возможности:

  • Итерация по элементам с помощью Underscore-функций (each, map, filter).
  • Автоматическая синхронизация с сервером через fetch, save и destroy.
  • Прослушивание событий моделей и коллекции (add, remove, reset).

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

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

var TaskView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#task-template').html()),

    events: {
        'click .toggle': 'toggleCompleted',
        'click .delete': 'deleteTask'
    },

    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.set('completed', !this.model.get('completed'));
    },

    deleteTask: function() {
        this.model.destroy();
    }
});

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

  • tagName и el задают DOM-элемент.
  • template отвечает за HTML-разметку.
  • events связывает действия пользователя с методами.
  • initialize позволяет автоматически слушать изменения модели.

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

Routers управляют состоянием приложения через URL:

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'home',
        'tasks/:id': 'viewTask'
    },

    home: function() {
        console.log('Главная страница');
    },

    viewTask: function(id) {
        console.log('Просмотр задачи с ID:', id);
    }
});

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

  • routes связывает URL с методами.
  • Backbone.history.start() активирует отслеживание истории браузера.
  • Позволяет создавать одностраничные приложения (SPA) без перезагрузки.

События (Events)

Events — фундамент Backbone.js, обеспечивающий реактивность. Все модели, коллекции и представления поддерживают события:

var task = new Task({ title: 'Учить Backbone.js' });
task.on('change', function(model) {
    console.log('Модель изменилась:', model.toJSON());
});
task.set('completed', true);

Основные события:

  • change — изменения атрибутов модели.
  • add/remove — добавление или удаление модели в коллекции.
  • destroy — удаление модели.
  • sync — синхронизация с сервером.

Точка входа приложения

Файл app.js соединяет модели, коллекции, представления и маршрутизатор:

var tasks = new Tasks();

tasks.fetch({
    success: function() {
        var tasksView = new TasksView({ collection: tasks });
        $('#app').html(tasksView.render().el);
    }
});

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

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

  • Создание коллекций и моделей.
  • Загрузка данных с сервера.
  • Инициализация Views и привязка их к DOM.
  • Настройка маршрутов для управления состоянием приложения.

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

Оглавление