Статьи

Backbone.js: MVC в JavaScript

Февраль 21, 2019

Сложные приложения JavaScript имеют все больше и больше логики, которая не связана напрямую с элементами DOM и HTML: логикой представления, механизмом сохранения через Ajax и localStorage или обработкой действий пользователя.

Такого рода логика может быть эффективно отделена от DOM, чтобы упростить тестирование и сделать код многократно используемым в различных ситуациях. Это старый MVC , в своем первоначальном воплощении (не на стороне веб-сервера), который теперь можно настроить в браузере.
Задача Backbone.js — настроить небольшую инфраструктуру MVC в окне браузера:

  • это обеспечивает структуру для моделей и коллекций .
  • Он управляет представлениями, которые заполняются и обновляются с помощью событий, создаваемых моделями.
  • Он поддерживает REST-подобные адаптеры для подключения к источнику данных на стороне сервера или localStorage в качестве механизма сохранения .

Pros

Поскольку логика на основе JavaScript будет только расти в современных приложениях, у этого решения есть много плюсов.

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

На самом деле, разделение не является крайним: контроллеры и представления объединяются в одни и те же классы. В этих классах представлений события в определенных элементах DOM связаны с методами, определенными вами для одного и того же объекта:

window.AppView = Backbone.View.extend({
    events: {
    "keypress #new-todo":  "createOnEnter",
    "keyup #new-todo":     "showTooltip",
    "click .todo-clear a": "clearCompleted"
    },
    ...

в то время как методы шаблона вызывают некоторые хуки, которые вы можете определить, чтобы указать HTML для отображения:

render: function() {
          this.$('#todo-stats').html(// ...

Более того, многие механизмы (обработка событий, рендеринг HTML, хранение) отнимаются у вас и централизуются платформой .

Cons

Принятие Backbone.js также имеет некоторые ограничения.

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

window.Todo = Backbone.Model.extend({
    defaults: function() {
      return {
        done:  false,
        order: Todos.nextOrder()
      };
    },
    toggle: function() {
      this.save({done: !this.get("done")});
    }

});

В целом мы находимся на уровне архитектуры, соответствующей первому поколению серверных инфраструктур: постоянство на основе Active Record и жесткая зависимость от кода инфраструктуры:

window.TodoList = Backbone.Collection.extend({
    model: Todo,
    localStorage: new Store("todos"),
    ...

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

Конечно, эта связь присутствует, вероятно, во всех средах JavaScript, более сложных, чем jQuery, и которые нацелены на управление всей цепочкой событий; фреймворк переходит от клика пользователя к запросу на стороне сервера, как в случае с Ext JS. Мы все еще находимся в фазе «сделай все быстро», а не в фазе «умнее работать».

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

Ресурсы

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

41
Share: