Главная Заметки Разное Мощь backbone.js в веб-приложениях



Осуществляем все этапы разработки сайтов.
Программирование под заказ (PHP, JavaScript, Delphi, базы данных).

Контакты:

телефон: 8-921-989-73-77, Юлия
8-911-400-24-42, Александр
В вашем браузере запрещен Javascript, адрес электронной почты скрыт
  267442

  4477662

Мощь backbone.js в веб-приложениях PDF Печать E-mail
Автор: Александр   
06.06.2014 14:03

Я не очень-то любил программирование на Javascript. Когда и приходилось писать, мог полезть в Интернет напомнить себе как создать массив :) Вот такой уровень (кстати, ответ на вопрос: var x = []; ). Достаточно давнее, но обрывочное знакомство с JQuery, простенькие кусочки кода - и всё. И тем большим было моё удивление простотой и лёгкостью использования библиотеки backbone.js, когда я попытался в ней поразбираться, и применить сразу в не самых простых задачах.

Попробую здесь кратко описать, что же это такое. Парадигма MVC (модель-вид-контроллер) уже давно стала де-факто стандартом при разработке сайтов в их серверной части. Но клиентская часть, когда требуется какой-то функционал - часто оказывается самописным набором разрозненных функций. Библиотека Backbone.js позволяет применять такой же способ построения приложения и в конечном окне браузера. Внутри она содержит очень удобную библиотеку underscore, которая значительно упростит жизнь при работе с массивами, объектами, коллекциями. Подробнее можете почитать на сайтах backbonejs.ru и underscorejs.ru, но сейчас это скорее справочники, чем руководства к действию. Хотя, для underscore этого достаточно.

 

Прелесть backbone заключается в возможности создать в веб-документе приложение, состоящее из логически самодостаточных компонент, которые общаются между собой при помощи событий. Что же это за части?

 

View. Как и положено, это обычное представление. Оно умеет формироваться из шаблона, оно может быть подписано на события модели, и перерисовываться по этим событиям, так же view генерирует свои события (например, нажатия на кнопки).

Model Модель содержит в себе набор данных и логику приложения. Она умеет обновляться данными с сервера (JSON), и сохраняться на сервере, практически являясь синхронизированным представителем серверной модели у вам на сайте.

Коллекция моделей. Набор объектов, с которым можно производить все действия, предоставляемые underscore, и который умеет генерировать события при добавлении-удалении-изменении моделей в себе. Коллекция так же умеет синхронизироваться с сервером.

Как же тогда будет выглядеть страница сайта? Вот пример. Список товаров, каждый из которых выводится небольшим блоком со своим html-форматированием:

При открытии страницы, сервер отдаёт только её каркас - шапка, меню, нижняя часть, без главного наполнения. Дальше, срабатывает JQuery-обработчик события "загрузка завершена". Он создаёт пустую коллекцию "товары".  Можно её одной командой обновить с сервера, а можно через AJAX запросить JSON-список товаров для первой страницы, и это очень просто:

$.get(
'/goods/list',
{
},
onGoodsLoaded
);


function onGoodsLoaded(data) {
$('div#infscr-loading').fadeOut();
var items = JSON.parse(data);
_.each(items, function (item) {
if (item == 'end') {
$('div.load-more-holder').html('Достигнут конец списка').fadeOut('slow');
return;
}
goods.add(item);
});
}

И всё! Простой код выше, загрузит первую страницу списка товаров, отобразит её в браузере, да ещё и поддерживает ajax-подгрузку новых страниц! Причём, с сервера передаётся только компактный JSON, вместо гроомздкого HTML-блока каждого товара.

Но как же так? Очень просто, вот такая цепочка: при добавлении нового элемента в коллекцию, отрабатывает событие onAdd. По нему создаётся новый View, связанный с этой моделью (по одной модели и представлению на каждый товар). У представления есть обработчик события Initialise, по которому он отображается в документе. Вот и всё!

Удаляем модель из коллекции - срабатывает обработчик события, и товар исчезает со страницы. Хотим отредактировать товар - по событию в View "нажата кнопка: Edit" - меняем состояние модели: this.model.set('state', 'edit'); Модель, например, обновилась с сервера, отметила, что товар редактируется. А в View тем временем отработало событие модели "изменилось состояние". Обработчик события читает из модели её текущее состояние, и перерисовывается в соответствии с ним (например, выбрать шаблон из массива this.templates[this.model.get('state']) , и перерисоваться. В результате, с теми же (или обновлёнными моделью) данными, у нас вместо карточки товара, возникла форма редактирования этого товара).

Вот так, просто и удобно! Можно легко создать "SPA" (одностраничное приложение), где всё происходит "на лету". Вы возразите: "Это круто для админки, но такой сайт не будет индексироваться поисковиками". Да, это было проблемой. Но тут вступает в игру компонент Controller, который, скорее, Router.  Он поддерживает хеш-навигацию, о которой, в свою очередь прекрасно осведомлён тот же Google. Вот простой пример. Кстати, в нём обязательно обратите внимание на работу с mercurial. Для автономного проекта это очень хороший выбор системы контроля версий (тогда как для распределённой разработки большого проекта, обычно используют Git, при отсутствии ветвей - можно и SVN) А про ньюансы хеш-навигации с точки зрения поисковика - посмотрите здесь.

И всё это "счастье" прекрасно расширяется и масштабируется... Возможности, практически безграничны!

Обновлено 06.06.2014 18:17
 

Добавить комментарий


Защитный код
Обновить