В отличие от своих коллег по веб-разработке, JavaScript никогда не имел большого количества фреймворков для обеспечения структуры. К счастью, в последние годы это начинает меняться.
Сегодня я хотел бы представить вам Backbone.JS , симпатичную маленькую библиотеку, которая значительно упрощает процесс создания сложных, интерактивных и управляемых данными приложений. Это обеспечивает чистый способ хирургического отделения ваших данных от вашей презентации.
Обзор Backbone.JS
Backbone, созданная Джереми Ашкенасом, ниндзя JS, который создал CoffeeScript, представляет собой сверхлегкую библиотеку, которая позволяет создавать простые в обслуживании внешние интерфейсы. Он не зависит от сервера и хорошо работает с любой из современных библиотек JavaScript, которые вы уже используете.
Backbone — это набор связанных объектов весом менее 4 КБ, которые придают структуру вашему коду и, в основном, помогают вам создать правильное приложение MVC в браузере. Официальный сайт описывает его назначение так:
Backbone предоставляет структуру для приложений, насыщенных JavaScript, предоставляя моделям привязку значения ключа и настраиваемые события, коллекции с богатым API перечислимых функций, представления с декларативной обработкой событий и связывает все это с существующим приложением через интерфейс RESTful JSON.
Посмотрим правде в глаза: вышесказанное немного сложно разобрать и понять. Итак, давайте продолжим и немного разберем жаргон с помощью Джереми.
Привязка ключ-значение и пользовательские события
При изменении содержимого или состояния модели другие объекты, подписанные на модель, уведомляются, чтобы они могли действовать соответствующим образом. Здесь представления прослушивают изменения в модели и обновляются соответственно, вместо того чтобы модели приходилось обрабатывать представления вручную.
Богатый API перечислимых функций
Backbone поставляется с рядом очень полезных функций для обработки и работы с вашими данными. В отличие от других реализаций, массивы в JavaScript довольно стерилизованы, что действительно является проблемой, когда вам приходится иметь дело с данными.
Представления с декларативной обработкой событий
Твои дни написания звонков на спагетти с привязкой прошли. Вы можете программно объявить, какой обратный вызов должен быть связан с конкретными элементами.
RESTful JSON-интерфейс
Даже если по умолчанию используется стандартный вызов AJAX, когда вы хотите общаться с сервером, вы можете легко переключить его на все, что вам нужно. Появилось несколько адаптеров, охватывающих большинство фаворитов, включая веб-сокеты и локальное хранилище.
Чтобы разбить его на еще более простые термины:
Backbone обеспечивает чистый способ хирургического отделения ваших данных от вашей презентации. Модель, которая работает с данными, касается только синхронизации с сервером, в то время как основной задачей представления является прослушивание изменений в подписанной модели и рендеринг HTML.
Быстрый FAQ
Я предполагаю, что вы, вероятно, немного озадачены в этом пункте, поэтому давайте проясним несколько вещей:
Это заменяет jQuery?
Нет. Они довольно дополняют друг друга, практически не перекрываются по функциональности. Backbone обрабатывает все абстракции более высокого уровня, в то время как jQuery — или подобные библиотеки — работают с DOM, нормализуют события и так далее.
Их области применения и варианты использования довольно разные, и потому что вы знаете, одно не означает, что вы не должны изучать другое. Как разработчик JavaScript, вы должны знать, как эффективно работать с обоими.
Почему я должен использовать это?
Потому что чаще всего код переднего плана превращается в парящую, грязную кучу вложенных обратных вызовов, манипуляций с DOM, HTML для презентации среди других невыразимых действий.
Backbone предлагает довольно чистый и элегантный способ управления этим хаосом.
Где я должен использовать это?
Backbone идеально подходит для создания тяжелых приложений, управляемых данными. Вспомните интерфейс GMail, новый Twitter или любое другое открытие последних нескольких лет. Это облегчает создание сложных приложений .
Хотя вы можете использовать его для более популярных веб- страниц , это действительно библиотека, созданная специально для веб-приложений.
Это похоже на капучино или Sproutcore?
Да и нет.
Да, потому что, как и вышеупомянутые платформы, это в первую очередь предназначено для создания сложных внешних интерфейсов для веб-приложений.
Это не похоже на то, что Backbone довольно скудный и поставляется без виджета, с которым другие отправляют.
Магистраль невероятно легкая, менее 4 килобайт.
Существует также тот факт, что Cappuccino заставляет вас писать свой код в Objective-J, в то время как представления Sproutcore должны быть объявлены программно в JS. Хотя ни один из этих подходов не является неправильным, с Backbone нормальный JavaScript используется вашим обычным HTML и CSS для достижения цели, что приводит к более мягкой кривой обучения.
Я все еще могу использовать другие библиотеки на странице, верно?
Абсолютно. Не только ваш типичный доступ к DOM, вид переноса AJAX, но также и остальная часть вашего вида шаблонов и скриптов. Он очень, очень слабо связан, что означает, что вы можете использовать почти все свои инструменты в сочетании с Backbone.
Это откроет мир во всем мире?
Нет простите. Но вот что- то, чтобы подбодрить тебя.
Хорошо, теперь с этим вне пути, давайте погрузимся в!
Знакомство с позвоночником
Изначально MVC в Backbone расшифровывался как Models, Views и Collections, поскольку в платформе не было контроллеров. Это с тех пор изменилось.
Ядро Backbone состоит из четырех основных классов:
- модель
- Коллекция
- Посмотреть
- контроллер
Поскольку у нас мало времени, давайте рассмотрим только основные классы сегодня. Мы собираемся сделать продолжение с очень простым приложением, чтобы продемонстрировать концепции, изложенные здесь, так как было бы слишком много, чтобы поместить все в одну статью и ожидать, что читатель проанализирует все.
Следите за вашими глазами в течение следующих нескольких недель!
модель
Модели могут означать разные вещи в разных реализациях MVC. В Backbone модель представляет отдельную сущность — запись в базе данных, если хотите. Но здесь нет жестких и быстрых правил. С сайта Backbone:
Модели — это сердце любого приложения JavaScript, содержащего интерактивные данные, а также большую часть логики, окружающей их: преобразования, проверки, вычисленные свойства и контроль доступа.
Модель просто дает вам возможность читать и записывать произвольные свойства или атрибуты в наборе данных. Имея это в виду, единственный вкладыш ниже полностью функционален:
|
1
|
var Game = Backbone.Model.extend({});
|
Давайте построим это немного.
|
1
2
3
4
5
6
7
8
9
|
var Game = Backbone.Model.extend({
initialize: function(){
alert(«Oh hey! «);
},
defaults: {
name: ‘Default title’,
releaseDate: 2011,
}
});
|
initialize будет запущен, когда объект будет создан. Здесь я просто предупреждаю о безрассудстве — в вашем приложении вы, вероятно, должны загружать свои данные или выполнять другие действия по дому. Я также определяю кучу значений по умолчанию, если данные не передаются.
Давайте посмотрим, как читать и писать атрибуты. Но сначала давайте создадим новый экземпляр.
|
1
2
3
4
5
6
7
8
|
// Create a new game
var portal = new Game({ name: «Portal 2», releaseDate: 2011});
// release will hold the releaseDate value — 2011 here
var release = portal.get(‘releaseDate’);
// Changes the name attribute
portal.set({ name: «Portal 2 by Valve»});
|
Если вы заметили мутаторы get / set, имейте cookie! Атрибуты модели не могут быть прочитаны через ваш типичный формат object.attribute. Вам придется пройти через метод получения / установки, так как у вас меньше шансов изменить данные по ошибке.
На данный момент все изменения хранятся только в памяти. Давайте сделаем эти изменения постоянными, общаясь с сервером.
|
1
|
portal.save();
|
Вот и все. Вы ожидали большего? Вышеуказанная строка будет отправлять запрос на ваш сервер. Имейте в виду, что тип запроса будет меняться разумно. Поскольку это свежий объект, будет использоваться POST. В противном случае используется PUT.
Есть намного больше функций, модели Backbone предоставляют вам по умолчанию, но это определенно должно помочь вам начать работу. Нажмите на документацию для получения дополнительной информации.
Коллекция
Коллекции в Backbone — это просто набор моделей. Если исходить из аналогии с нашей базой данных, полученной ранее, коллекции — это результаты запроса, в котором результаты состоят из нескольких записей [моделей]. Вы можете определить коллекцию следующим образом:
|
1
2
3
4
|
var GamesCollection = Backbone.Collection.extend({
model : Game,
}
});
|
Первое, на что стоит обратить внимание, — это то, что мы определяем, к какой модели относится коллекция. Расширяя наш пример ранее, я делаю эту коллекцию коллекцией игр.
Теперь вы можете пойти дальше и поиграть со своими данными в свое сердце. Например, давайте расширим коллекцию, добавив метод, который возвращает только определенные игры.
|
1
2
3
4
5
6
7
8
9
|
var GamesCollection = Backbone.Collection.extend({
model : Game,
old : function() {
return this.filter(function(game) {
return game.get(‘releaseDate’) < 2009;
});
}
}
});
|
Это было легко, не так ли? Мы просто проверяем, была ли игра выпущена до 2009 года, и если да, возвращаем игру.
Вы также можете напрямую управлять содержимым коллекции следующим образом:
|
1
2
|
var games = new GamesCollection
games.get(0);
|
Приведенный выше фрагмент создает новую коллекцию, а затем извлекает модель с идентификатором 0. Вы можете найти элемент в определенной позиции, связав индекс с методом at, например: games.at (0);
И, наконец, вы можете динамически заполнить свою коллекцию следующим образом:
|
1
2
3
4
5
6
7
8
|
var GamesCollection = Backbone.Collection.extend({
model : Game,
url: ‘/games’
}
});
var games = new GamesCollection
games.fetch();
|
Мы просто позволяем Backbone откуда брать данные через свойство url . После этого мы просто создаем новый объект и вызываем метод fetch, который запускает асинхронный вызов сервера и заполняет коллекцию результатами.
Это должно охватывать основы коллекций с Backbone. Как я уже упоминал, здесь есть куча вкусностей, поскольку с помощью Backbone наложены псевдонимы для множества полезных утилит из библиотеки Underscore. Краткое ознакомление с официальной документацией должно помочь вам начать.
Посмотреть
Представления в Backbone могут быть немного запутанными на первый взгляд. Для пуристов MVC они напоминают контроллер, а не само представление.
Представление в основном выполняет две обязанности:
- Слушайте события DOM и моделей / коллекций.
- Представлять пользователю состояние приложения и модель данных.
Давайте продолжим и создадим очень простой вид.
|
1
2
3
4
5
6
7
|
GameView= Backbone.View.extend({
tagName : «div»,
className: «game»,
render : function() {
// code for rendering the HTML for the view
}
});
|
Довольно просто, если вы уже следовали этому руководству. Я просто указываю, какой элемент HTML следует использовать для переноса представления через атрибут tagName, а также идентификатор для него через className .
Давайте перейдем к части рендеринга.
|
1
2
3
4
5
6
|
render : function() {
this.el.innerHTML = this.model.get(‘name’);
//Or the jQuery way
$(this.el).html(this.model.get(‘name’));
}
|
el ссылается на элемент DOM, на который ссылается представление. Мы просто получаем доступ к названию игры для свойства элемента innerHTML . Проще говоря, элемент div теперь содержит название нашей игры. Очевидно, способ jQuery будет проще, если вы уже использовали библиотеку.
В более сложных макетах работа с HTML в JavaScript не только утомительна, но и безрассудна. В этих сценариях шаблонизация — это путь.
Backbone поставляется с минимальным набором шаблонов, любезно предоставленным Underscore.JS, но вы можете использовать любое из доступных превосходных шаблонных решений.
Наконец, давайте посмотрим, как представления слушают события. DOM события в первую очередь.
|
1
2
3
4
5
6
7
8
9
|
events: {
‘click .name’: ‘handleClick’
},
handleClick: function(){
alert(‘In the name of science… you monster’);
// Other actions as necessary
}
|
Должно быть достаточно просто, если вы работали с событиями раньше. Мы в основном определяем и подключаем события через объект событий. Как вы можете видеть выше, первая часть относится к событию, следующая указывает элементы запуска, в то время как последняя часть относится к функции, которая должна быть запущена.
А теперь о привязке к моделям и коллекциям. Я расскажу о привязке к моделям здесь.
|
1
2
3
4
5
6
|
GameView= Backbone.View.extend({
initialize: function (args) {
_.bindAll(this, ‘changeName’);
this.model.bind(‘change:name’, this.changeName);
},
});
|
Первое, на что нужно обратить внимание, — это как мы размещаем код привязки в функциях инициализации . Естественно, это лучше делать с самого начала.
bindAll — это утилита, предоставляемая Underscore, которая сохраняет значение этого значения функции. Это особенно полезно, так как мы передаем кучу функций, а функции, указанные как обратные вызовы, стирают это значение.
Теперь, когда атрибут имени модели изменяется, вызывается функция changeName . Вы также можете использовать добавление и удаление глаголов, чтобы опросить изменения.
Прослушивание изменений в коллекциях так же просто, как замена модели коллекцией при привязке обработчика к обратному вызову.
контроллер
Контроллеры в Backbone, по сути, позволяют создавать закладки с сохранением состояния приложений с помощью hashbangs.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
var Hashbangs = Backbone.Controller.extend({
routes: {
«!/»: «root»,
«!/games»: «games»,
},
root: function() {
// Prep the home page and render stuff
},
games: function() {
// Re-render views to show a collection of books
},
});
|
Это очень знакомо для маршрутизации в традиционных серверных средах MVC. Например ,! / Games будет отображаться на функцию games, а URL в самом браузере будет доменом / #! / Games .
Благодаря интеллектуальному использованию hashbangs вы можете создавать приложения, которые в значительной степени основаны на JS, но также имеют закладки.
Если вы беспокоитесь о том, чтобы сломать кнопку «назад», то Backbone вас тоже покроет.
|
1
2
3
4
|
// Init the controller like so
var ApplicationController = new Controller;
Backbone.history.start();
|
С помощью приведенного выше фрагмента Backbone может отслеживать ваши hashbangs и в сочетании с маршрутами, которые вы указали ранее, сделать ваше приложение доступным для закладки.
Чему я научился у Магистра
В целом, вот несколько уроков, которые я извлек из способа создания приложений Backbone:
- Нам действительно нужен MVC для внешнего интерфейса. Традиционные методы оставляют нам код, который слишком сложен, запутан и невероятно сложен в обслуживании.
- Хранение данных и состояния в DOM — плохая идея. Это стало более понятным после создания приложений, которые нуждались в обновлении различных частей приложения с использованием одних и тех же данных.
- Жирные модели и узкие контроллеры — это путь. Рабочий процесс упрощается, когда о бизнес-логике заботятся модели.
- Шаблонирование является абсолютной необходимостью. Помещение HTML в ваш JavaScript дает вам плохую карму.
Достаточно сказать, что Backbone вызвал изменение парадигмы в том, как должны быть построены внешние интерфейсы, по крайней мере, для меня. Учитывая очень широкий охват сегодняшней статьи, я уверен, что у вас есть тонна вопросов. Нажмите на раздел комментариев ниже, чтобы присоединиться. Большое вам спасибо за чтение и ожидайте еще кучу уроков по Backbone в будущем!