Backbone становится невероятно популярным в качестве среды разработки веб-приложений. Наряду с этой популярностью появляются бесчисленные расширения и плагины, которые расширяют возможности фреймворка и заполняют дыры, которые другие заполнили. Давайте посмотрим на некоторые из лучших вариантов.
Backbone.Marionette
Это расширение, разработанное Дериком Бэйли, довольно большое и является моим личным фаворитом. Вместо того, чтобы добавить одну или две функции в Backbone, Дерик решил заполнить все самые большие дыры, которые, по его мнению, существуют. Вот что он говорит об этом в файле readme проекта GitHub .
«Backbone.Marionette — это составная библиотека приложений для Backbone.js, целью которой является упрощение создания крупномасштабных приложений JavaScript. Это набор общих шаблонов проектирования и реализации, которые можно найти в приложениях, которые я (Derick Bailey) создавал с помощью Backbone. и включает в себя различные части, вдохновленные композитными архитектурами приложений, такими как среда Microsoft «Prism». «
Давайте внимательнее посмотрим на то, что Marionette предоставляет нам:
- Приложение: это центральный объект, через который все в вашем приложении может общаться. Он предлагает способ быстрой и простой настройки основных представлений вашего приложения, центральный концентратор событий, через который каждый модуль в вашем приложении может обмениваться данными, чтобы они не зависели друг от друга, и инициализаторы для детального управления как ваше приложение загружается.
- Модули: средство инкапсуляции кода модуля и пространства имен этих модулей в центральном объекте приложения.
- Представления: новые классы представлений для расширения, которые предлагают собственные методы для очистки, так что вы не получите утечек памяти. Он также содержит шаблон рендеринга; для простых представлений просто укажите шаблон и модель, и все остальное будет обработано.
- Коллекция / составные представления: здесь вступает в игру бит «составной библиотеки приложений». Эти два представления позволяют вам легко создавать представления, которые могут обрабатывать процесс рендеринга всех представлений в коллекции или даже вложенной иерархии коллекций и моделей без особых усилий.
- Регионы и макеты. Регион — это объект, который может выполнять всю работу по визуализации, отрисовке и закрытию представлений для определенного места в DOM. Макет — это просто нормальное представление, в которое также встроены регионы для обработки подпредставлений.
- AppRouter: новый тип маршрутизатора, который может использовать контроллер для обработки рабочей нагрузки, чтобы маршрутизатор мог просто содержать конфигурацию маршрутов.
- События: расширенная от проекта Wreqr , Marionette делает события Backbone еще более мощными для создания крупномасштабных приложений на основе событий .
Я только поцарапал поверхность того, что может сделать Марионетка. Я определенно рекомендую перейти на GitHub и прочитать их документацию в Wiki .
Кроме того, Эндрю Берджесс рассказывает о Марионетке в своем курсе Tuts + Premium Advanced Backbone Patterns и Techniques .
Backbone.Validation
Backbone.Validation предназначен для заполнения небольшой ниши проблемы: проверки модели. Существует несколько расширений валидации для Backbone, но это, похоже, вызвало наибольшее уважение у сообщества.
Вместо того, чтобы фактически писать метод validate для ваших моделей, вы можете создать свойство validation для ваших моделей, которое представляет собой объект, который определяет каждый из атрибутов, которые вы хотите проверить, и список правил проверки для каждого из этих атрибутов. Вы также можете указать сообщения об ошибках для каждого атрибута и передать пользовательские функции для проверки одного атрибута. Вы можете увидеть пример ниже, который модифицирован из одного из примеров на их сайте.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var SomeModel = Backbone.Model.extend({
validation: {
name: {
required: true
},
‘address.street’: {
required: true
},
‘address.zip’: {
length: 4
},
age: {
range: [1, 80]
},
email: {
pattern: ’email’,
// supply your own error message
msg: «Please enter a valid email address»
},
// custom validation function for `someAttribute`
someAttribute: function(value) {
if(value !== ‘somevalue’) {
return ‘Error message’;
}
}
}
});
|
Существует бесчисленное множество встроенных валидаторов и шаблонов, которые вы можете проверить, и даже есть способ дополнить список своими глобальными валидаторами. Этот плагин Backbone не делает забаву валидной, но она, безусловно, исключает любые оправдания для того, чтобы не добавлять валидацию. Пожалуйста, посетите их сайт для большего количества примеров и более глубокого объяснения того, как использовать этот замечательный инструмент.
Backbone.LayoutManager
Backbone.LayoutManager — это все, что делает представления Backbone лучше. Как и Backbone.Marionette, он вводит код очистки для предотвращения утечек памяти, обрабатывает весь шаблон и оставляет вам только код конфигурации и приложения. В отличие от марионеток, LayoutManager фокусируется именно на представлениях.
Поскольку LayoutManager фокусируется исключительно на представлениях, он может делать больше для видов, чем Marionette. Например, LayoutManager способен выполнять асинхронный рендеринг, если вы хотите динамически загружать ваши шаблоны из внешних файлов.
LayoutManager также может обрабатывать подпредставления, хотя и совсем не так, как Marionette. В любом случае, это в значительной степени конфигурация, которая делает вещи чрезвычайно простыми и исключает 90% работы, которую вам нужно было бы выполнить, если бы вы пытались реализовать все это самостоятельно. Ниже приведен простой пример добавления трех подпредставлений в представление:
|
1
2
3
4
5
6
7
|
Backbone.Layout.extend({
views: {
«header»: new HeaderView(),
«section»: new ContentView(),
«footer»: new FooterView()
}
});
|
Как обычно, не забудьте обратиться к странице GitHub и документации, чтобы узнать больше.
Backbone.ModelBinder
Backbone.ModelBinder создает связи между данными в ваших моделях и разметкой, отображаемой вашими представлениями. Вы уже можете сделать это, связавшись с событием изменения в ваших моделях и снова отобразив представление, но ModelBinder является более эффективным и простым в использовании.
Посмотрите на код ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var MyView = Backbone.View.extend({
template: _.template(myTemplate),
initialize: function() {
// Old Backbone.js way
this.model.on(‘change’, this.render, this);
// or the new Backbone 0.9.10+ way
this.listenTo(this.model, ‘change’, this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
}
});
|
Проблема с этим подходом состоит в том, что каждый раз, когда изменяется один атрибут, нам нужно повторно визуализировать весь вид. Кроме того, при каждом рендеринге нам нужно конвертировать модель в JSON . Наконец, если требуется, чтобы привязка была двунаправленной (когда обновляется модель, то же самое происходит и с DOM, и наоборот), нам нужно добавить еще больше логики в представление.
В этом примере использовалась функция template Underscore. Давайте предположим, что шаблон, который мы передали в него, выглядит так:
|
1
2
3
4
5
6
7
|
<form action=»…»>
<label for=»firstName»>First Name</label>
<input type=»text» id=»firstName» name=»firstName» value=»<%= firstName %>»>
<label for=»lastName»>Last Name</label>
<input type=»text» id=»lastName» name=»lastName» value=»<%= lastName %>»>
</form>
|
Использование тегов <%= и %> заставляет функцию template заменять те области свойствами firstName и lastName которые существуют в JSON, который мы отправили из модели. Предположим, что модель также имеет оба этих атрибута.
С ModelBinder мы можем удалить эти шаблонные теги и отправить в обычном HTML . ModelBinder увидит значение атрибута name в теге input и автоматически назначит значение модели для этого свойства атрибуту value тега. Например, имя первого input установлено в «firstName». Когда мы используем ModelBinder, он увидит это и затем установит значение этого input в свойство firstName модели.
Ниже вы увидите, как будет выглядеть наш предыдущий пример после перехода на использование ModelBinder. Кроме того, следует понимать, что привязка является двунаправленной, поэтому, если input теги обновляются, модель будет обновляться автоматически для нас.
HTML-шаблон:
|
1
2
3
4
5
6
7
|
<form action=»…»>
<label for=»firstName»>First Name</label>
<input type=»text» id=»firstName» name=»firstName»>
<label for=»lastName»>Last Name</label>
<input type=»text» id=»lastName» name=»lastName»>
</form>
|
JavaScript View:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var MyView = Backbone.View.extend({
template: myTemplate,
initialize: function() {
// No more binding in here
},
render: function() {
// Throw the HTML right in
this.$el.html(this.template);
// Use ModelBinder to bind the model and view
modelBinder.bind(this.model, this.el);
}
});
|
Теперь у нас есть чистые шаблоны HTML, и нам нужна только одна строка кода, чтобы связать HTML представления и модели вместе, используя modelBinder.bind . modelBinder.bind принимает два обязательных аргумента и один необязательный аргумент. Первый аргумент — это модель с данными, которые будут связаны с DOM. Второй — это DOM-узел, который будет рекурсивно проходить в поисках привязок. Последний аргумент — это объект binding который задает расширенные правила для того, как должны выполняться привязки, если вам не нравится использование по умолчанию.
ModelBinder может использоваться не только для input тегов. Работает на любом элементе. Если элемент относится к типу ввода формы, например, input , select или textarea , он обновит значения этого элемента соответственно. Если вы привязываетесь к элементу, такому как div или span , он поместит данные модели между открывающим и закрывающим тегами этого элемента (например, <span name="firstName">[data goes here]<span> ).
Backbone.ModelBinder обладает гораздо большими возможностями, чем я продемонстрировал здесь, поэтому обязательно прочитайте документацию по репозиторию GitHub, чтобы узнать все об этом.
Вывод
Это оборачивает вещи. Я рассмотрел лишь несколько расширений и плагинов, но это то, что я считаю наиболее полезным.
Магистральный ландшафт постоянно меняется. Если вы хотите просмотреть полный список различных доступных расширений Backbone, посетите эту вики-страницу , которую группа Backbone регулярно обновляет.