Backbone.js

Как говорит Sam Goldwyn:

«Не обращайте большое внимание на критику, но и не игнорируйте её»

 

Один из жалобных комментариев на Pipefishbook гласит, что книга, вместо того, чтобы обсуждать Backbone, фокусируется на инструментах JavaScript.

 

Это правда: Backbone.js является внешним фронтнэдом библиотеки. Под «фронтнэдом» подразумевается HTML или JQuery. И действительно, первое знакомство с Backbone возможно и без упоминания модулей или помощи менеджеров.

Что ж, давайте начнём с простого: с SVG прямоугольника раскраски приложения, этого будет достаточно, чтобы показать, что из себя представляет Backbone.

index.html

Чтобы начать работу с браузером, вам необходимо знать хотя бы основы HTML. Простой “gestalt”(гештальт) HTML выглядит так:

После базовой настройки HTML ,можете подключать к своей работе библиотеки JavaScript, то есть Backbone и его составляющие Underscore and jQuer. Если у вас есть соединение с интернетом, то легче всего будет использовать некоторые ссылки на CDNs записи:

Т.е. библиотеки достаточно малы и могут быть включены в HTML-заголовке выше.

Примечание: использование модулей и вмешательства менеджеров JavaScript могут помочь вам в комплектации внешних зависимостей и улучшить производительности приложения. Но этот блог не предназначен для обсуждения данных деталей.

Теперь можете выдохнуть. Мы заложили основу приложения Backbone.

Построение данных.

Следующий шаг оформления -добавление начальных данных для чертежа. Это может вступить в противоречие с вашими привычками вставлять фигуру SVG напрямую. Но когда вы выработаете «бизнес-логику», эта процедура покажется вам лёгкой и удобной.

Итак, вот данные:

Начиная с ввода данных, вы приобретаете преимущество: получаете абстрактное представление того, с чем работаете. Вы же не начинаете строить машину снаружи, а изнутри — начиная с двигателя. Аналогично, данные являются двигателем для вашего UI.

Сначала, давайте преобразуем ряды графических данных в коллекции и модели Backbone. С помощью Backbone API’s будет легко исправить содержимое и просмотреть полученные изменения.

Для раскраски приложения базовые настройки коллекций и моделей Backbone выглядят так:

На своём JavaScript вы можете работать с экземплярами прямоугольников следующим образом:

В принципе, вы можете изменить свойства прямоугольников прямо сейчас. Также вы можете рассортировать и отфильтровать прямоугольники, содержащие родные команды Backbone.Для этого вы можете прочитать книгу «в идеале Pipefishbook»

Визуализация UI:

Удовольствие в UI заключается в его представлении! И, в завлечении пользователей через создание событий. Это то место, куда и приходит часть Backbone.js. Например, представление прямоугольников может быть создано с помощью Backbone.View так:

Внутри функции render, обычно находится вызов шаблонных функций. Запомните, конструкция DOM node “manually” просто отлично работает.

Примечание, рендеринг происходит в контексте, часто непосредственно после загрузки страницы:

Привлечение внимания пользователя:

Следующее, и последнее, понадобится вам для предоставления пользователю возможности просматривать объекты. Для этого добавьте(прикрепите) значок событий для мышки пользователя. Backbone.View создаст графу «события» для этого. Работа с событиями может быстро оказаться непростой. Чтобы оставить её простой, позвольте показать улучшенный подход к клику «события»:

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

Идём дальше

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

Сейчас цвет прямоугольника изменился. Что ж, реальный чертёж требует гораздо большей работы. Вам придётся столкнуться с подобной работой при изображении кругов или линий. Даже простая функция getRandomColor() скопирована и взята отсюда. В идеале вы могли бы сделать повторное использование кода проще. Так JavaScript был сформирован из CommonJS или RequireJS.

Спасибо, что читаете!

Демо / GitHub

Теги:

Разработка сложных пользовательских интерфейсов и SinglePage-приложений на JavaScript с использованием одного лишь jQuery может превратить код в запутанный клубок: множество callback’ов, привязка к конкретным элементам DOM и сложные манипуляции с ними — поддерживать и развивать такой код становится крайне сложно, дорого и, прямо скажем, неприятно.

Все мы проходили тот этап, когда для решения подобной проблемы мы изобретали собственные «велоcипеды». В данной статье мы познакомимся с Backbone.js, кратко рассмотрим его основные возможности, попробуем разобраться, чем же он может облегчить жизнь frontend-разработчика.

Backbone.js — это легкий MV*-фреймворк, позволяющий структурировать код JavaScript-приложений. Но прежде, чем говорить о нем, давайте разберемся с паттерном, а вернее, семейством паттернов MV* (Model-View-Whatever), наиболее известным из которых является паттерн MVC (Model-View-Controller).

Model-View-Whatever

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

Представление (View) — представление содержит логику отображения данных модели и коллекций в пользовательском интерфейсе.

Представление позволяет отделить данные от их конкретного отображения в DOM-модели, что позволяет отображать одни и те же данные в разных представлениях, а также реагировать всем представлениям на изменение состояния модели.

Контроллер (Controller) — промежуточный слой между данными и представлением, контроллер передает данные в представление.

Итак, Backbone.js состоит из следующих классов:

  • Model (Модель)
  • Collection (Коллекция)
  • View (Представление)
  • Router (Роутер)

Рассмотрим подробнее каждый из них.

Модель (Model)

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

Пример создания модели:

Каждый экземпляр модели при создании может содержать некоторые начальные поля:

Каждый раз при инстанцировании экземпляра модели вызывается метод initialize(). В примере ниже показано использование этого метода:

Создать новый экземпляр модели можно с помощью new:

Изменения в примере выше сохраняются только в оперативной памяти. Если вы хотите сохранить изменения модели на сервер, используйте метод save:

Так одной строчкой вы отправите запрос на сервер, если это новый объект, будет использован HTTP-метод POST, если редактируется уже существующий — метод PUT.

Коллекция (Collection)

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

Определить коллекцию можно следующим образом:

С моделями коллекции можно совершать определенные действия, к примеру, отфильтруем модели по автору. Для этого мы создали новый метод, который принимает имя автора в качестве параметра:

Просто и элегантно, не правда ли?

Инстанцировать объект коллекции можно так же, как и модель:

В данном примере мы создали объект коллекции и получили элемент коллекции с ID равным 0.

Наконец, если вам нужно получить данные коллекции с сервера, вы можете воспользоваться методом fetch(). При этом в атрибутах коллекции должен быть указан URL, откуда мы будет получать данные.

Представление (View)

Представления в Backbone.js выполняют две основные функции:

  • Отображение состояния приложения и данных модели пользователям;
  • Реагирование на события от элементов DOM и моделей/коллекций

Cоздадим простое представление:

Атрибут $el ссылается на обертку, которую создает представление. В нашем примере, мы создали элемент <div> с классом ‘book-item’ и поместили в него заголовок книги.

В этом примере мы не использовали возможность шаблонизации, если представление более сложное, можно использовать шаблонизатор из библиотеки Underscore.js.

Давайте изменим наш пример с использованием шаблонизатора:

Сам шаблон можно поместить непосредственно на HTML-странице:

Также представления в Backbone.js могут слушать события от элементов DOM и от моделей и коллекций.

В данном примере мы в качестве обработчика щелчка мыши по элементу с классом title назначили функцию ’onTitleClick’ и определили эту функцию.

Так представления могут реагировать на события пользовательского интерфейса и менять, соответственно, состояние модели и наоборот, отслеживать состояние модели и изменять отображение.

Роутер (Router)

Роутер используется для маршрутизации внутри приложения.

После того, как созданы все роутеры, в момент инициализации приложения необходимо вызвать функцию Backbone.history.start();

Заключение

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

В дальнейшем мы более подробнее рассмотрим систему событий, а также возможности шаблонизации.

She is the backbone of the family. 

Она — главная опора этой семьи. ☰

Will he have the backbone to tell the truth? 

Хватит ли у него мужества сказать правду? ☰

The Cordilleras are the backbone of America. 

Кордильеры являются своеобразным спинным хребтом, остовом Америки. ☰

Farmers are the backbone of this community. 

Фермеры составляют костяк этого сообщества. ☰

We are now coming to the backbone of our subject. 

Теперь мы подходим к сути нашего предмета. ☰

He doesn’t have the backbone to be a good manager. 

Ему не хватает твёрдости характера, чтобы стать хорошим руководителем / менеджером / тренером. ☰

Incorruptible judges are the backbone of the society. 

Неподкупные судьи являются основой общества. ☰

The irregularity in my backbone is probably congenital.  ☰

He showed some backbone by refusing to compromise his values.  ☰

the backbone is the part of a communication network that carries the heaviest traffic  ☰

Для того чтобы добавить вариант перевода, кликните по иконке ☰, напротив примера.

Возможные однокоренные слова

backboned  — позвоночный, твердый, решительный

Формы слова

noun
ед. ч.(singular): backbone
мн. ч.(plural):backbones

.

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

Закрыть меню