Кастомные методы и расширение функциональности

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

Расширение моделей

Models в Backbone.js хранят данные и управляют их состоянием. Каждая модель наследует базовый функционал, включая get, set, toJSON, save, fetch и destroy. Создание кастомных методов позволяет реализовать специфичную логику, связанную с обработкой данных.

Пример кастомного метода модели:

var Task = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    },
    toggleCompleted: function() {
        this.set('completed', !this.get('completed'));
    },
    isOverdue: function() {
        var dueDate = this.get('dueDate');
        return dueDate && new Date(dueDate) < new Date();
    }
});

var task = new Task({ title: 'Сдать отчёт', dueDate: '2025-12-01' });
task.toggleCompleted(); // меняет состояние completed на true
task.isOverdue(); // возвращает true или false

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

  • Кастомные методы могут использовать существующие методы модели (get, set, save) для управления состоянием.
  • Логика методов может быть как простая (переключение булевых значений), так и сложная (валидация, вычисления, взаимодействие с другими моделями).

Создание пользовательских коллекций

Collections — это упорядоченные наборы моделей. Стандартные методы коллекций включают add, remove, reset, fetch, sort и where. Расширение коллекции позволяет инкапсулировать специфическую бизнес-логику работы с набором моделей.

Пример расширения коллекции:

var TaskList = Backbone.Collection.extend({
    model: Task,
    getCompleted: function() {
        return this.filter(function(task) {
            return task.get('completed');
        });
    },
    getOverdue: function() {
        return this.filter(function(task) {
            return task.isOverdue();
        });
    },
    comparator: 'dueDate' // сортировка по дате
});

var tasks = new TaskList([
    { title: 'Сдать отчёт', dueDate: '2025-12-01', completed: false },
    { title: 'Подготовка презентации', dueDate: '2025-12-28', completed: true }
]);

var completedTasks = tasks.getCompleted();
var overdueTasks = tasks.getOverdue();

Особенности кастомных коллекций:

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

Расширение представлений (Views)

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

Пример кастомного метода в представлении:

var TaskView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<%= title %> <% if(completed){ %>✔<% } %>'),
    events: {
        'click': 'toggleTask'
    },
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    toggleTask: function() {
        this.model.toggleCompleted();
    },
    highlightOverdue: function() {
        if (this.model.isOverdue()) {
            this.$el.css('color', 'red');
        } else {
            this.$el.css('color', '');
        }
    }
});

var taskView = new TaskView({ model: task });
taskView.render();
taskView.highlightOverdue();

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

  • Методы представлений могут напрямую изменять DOM через $el.
  • Слушатели (listenTo) автоматически обновляют представление при изменениях модели или коллекции.
  • Кастомные методы помогают инкапсулировать визуальную логику, отделяя её от данных.

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

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

Пример создания пользовательского события:

var TaskEvents = _.extend({}, Backbone.Events);

TaskEvents.on('task:completed', function(task) {
    console.log('Задача выполнена:', task.get('title'));
});

task.on('change:completed', function() {
    if (task.get('completed')) {
        TaskEvents.trigger('task:completed', task);
    }
});

task.set('completed', true); // триггерит событие task:completed

Ключевые аспекты:

  • События позволяют связывать независимые части приложения без жесткой привязки.
  • Можно создавать глобальные шины событий для коммуникации между модулями.
  • Пользовательские события могут содержать параметры, которые передаются обработчикам.

Расширение стандартных функций Backbone

Backbone поддерживает расширение базовых классов через extend, что позволяет создавать новые модели, коллекции и представления с общими методами.

Пример базовой модели с расширяемой функциональностью:

var BaseModel = Backbone.Model.extend({
    logChanges: function() {
        this.on('change', function() {
            console.log('Изменения модели:', this.toJSON());
        });
    }
});

var User = BaseModel.extend({
    defaults: { name: '', age: 0 },
    celebrateBirthday: function() {
        this.set('age', this.get('age') + 1);
    }
});

var user = new User({ name: 'Иван', age: 30 });
user.logChanges();
user.celebrateBirthday(); // логирует изменения

Преимущества такого подхода:

  • Повторное использование логики между разными моделями.
  • Упрощение поддержки и расширения приложения.
  • Централизация общих методов и обработчиков событий.

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

Оглавление