Магистраль - это ...
... очень небольшая библиотека компонентов, которую вы можете использовать для организации вашего кода. Он поставляется в виде одного файла JavaScript. Исключая комментарии, он содержит менее 1000 строк реального JavaScript. Это разумно написано, и вы можете прочитать все это за пару часов.
Это интерфейсная библиотека, вы включаете ее в свою веб-страницу с помощью тега script. Он влияет только на браузер и мало говорит о вашем сервере, за исключением того, что в идеале он должен предоставлять спокойный API.
Если у вас есть API, у Backbone есть несколько полезных функций, которые помогут вам поговорить с ним, но вы можете использовать Backbone для добавления интерактивности на любую статическую HTML-страницу.
Магистраль для ...
... добавление структуры в JavaScript.
Поскольку JavaScript не применяет никаких конкретных шаблонов, приложения JavaScript могут очень быстро запутаться. Любой, кто создал что-то помимо тривиального в JavaScript, вероятно, столкнется с такими вопросами, как:
- Где я буду хранить мои данные?
- Где я буду размещать свои функции?
- Как мне соединить мои функции так, чтобы они вызывались разумным образом и не превращались в спагетти?
- Как сделать этот код поддерживаемым разными разработчиками?
Backbone стремится ответить на эти вопросы, задав вам:
- Модели и коллекции, которые помогут вам представлять данные и коллекции данных.
- Представления, чтобы помочь вам обновить DOM при изменении данных.
- Система событий, чтобы компоненты могли слушать друг друга. Это сохраняет ваши компоненты разъединенными и предотвращает спагеттификацию.
- Минимальный набор разумных соглашений, чтобы разработчики могли работать вместе на одной кодовой базе.
Мы называем это паттерном MV *. Модели, виды и дополнительные функции.
Магистраль легкая
Несмотря на первоначальные появления, Backbone фантастически легок, он почти ничего не делает. То, что он делает, очень полезно.
Он дает вам набор маленьких объектов, которые вы можете создавать и которые могут излучать события и слушать друг друга. Например, вы можете создать небольшой объект для представления комментария, а затем небольшой объект commentView для представления отображения комментария в определенном месте в браузере.
Вы можете указать commentView прослушивать комментарий и перерисовывать себя при изменении комментария. Даже если один и тот же комментарий отображается в нескольких местах на вашей странице, все эти представления могут прослушивать одну и ту же модель комментария и синхронизироваться.
Этот способ составления кода помогает избежать запутывания, даже если ваша кодовая база становится очень большой со многими взаимодействиями.
Модель
При запуске обычно данные хранятся либо в глобальной переменной, либо в DOM как атрибуты данных . У обоих из них есть проблемы. Глобальные переменные могут конфликтовать друг с другом и, как правило, имеют плохую форму. Атрибуты данных, хранящиеся в DOM, могут быть только строками, вам придется анализировать их снова и снова. Трудно хранить такие вещи, как массивы, даты или объекты, и анализировать ваши данные в структурированной форме.
Атрибуты данных выглядят так:
<p data-username="derek" data-age="42"></p>
Backbone решает эту проблему, предоставляя объект Model для представления ваших данных и связанные методы . Скажем, у вас есть список задач, у вас будет модель, представляющая каждый элемент в этом списке.
Когда ваша модель обновляется, она запускает событие. Вы можете иметь вид, связанный с этим конкретным объектом. Представление прослушивает события изменения модели и выполняет повторную визуализацию.
Просмотры
Backbone предоставляет вам объекты View, которые общаются с DOM. Все функции, которые управляют DOM или прослушивают события DOM, идут сюда.
Представление обычно реализует функцию рендеринга, которая перерисовывает весь вид или, возможно, часть вида. Нет необходимости реализовывать функцию рендеринга, но это общее соглашение.
Каждое представление привязано к определенной части DOM, поэтому у вас может быть searchFormView, который только слушает форму поиска, и shoppingCartView, который отображает только корзину покупок.
Представления обычно также привязаны к определенным моделям или коллекциям. Когда модель обновляется, она запускает событие, которое прослушивает представление. Представление может вызывать render для перерисовки.
Аналогичным образом, когда вы вводите в форму, ваше представление может обновить объект модели. Любое другое представление, слушающее эту модель, затем будет вызывать свою собственную функцию рендеринга.
Это дает нам четкое разделение проблем, что делает наш код чистым и аккуратным.
Функция рендеринга
Вы можете реализовать свою функцию рендеринга любым удобным для вас способом. Вы можете просто добавить сюда jQuery, чтобы обновить DOM вручную.
Вы также можете скомпилировать шаблон и использовать его. Шаблон - это просто строка с точками вставки. Вы передаете его функции компиляции вместе с объектом JSON и получаете обратно скомпилированную строку, которую вы можете вставить в свой DOM.
Коллекция
У вас также есть доступ к коллекциям, в которых хранятся списки моделей, поэтому todoCollection будет списком моделей todo. Когда коллекция получает или теряет модель, изменяет ее порядок или модель в коллекции обновляется, вся коллекция запускает событие.
Представление может прослушивать коллекцию и обновлять себя при каждом обновлении коллекции.
Вы можете добавить методы сортировки и фильтрации в свою коллекцию и, например, автоматически сортировать ее.
И события, чтобы связать все вместе
Насколько это возможно, компоненты приложения отделены друг от друга. Они общаются с помощью событий, поэтому shoppingCartView может прослушивать коллекцию shoppingCart и перерисовывать себя при добавлении корзины в корзину.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
Конечно, другие объекты также могут прослушивать ShoppingCart и могут выполнять другие действия, такие как обновление итога или сохранение состояния в локальном хранилище.
- Представления прослушивают Модели и визуализируют при изменении модели.
- Представления прослушивают коллекции и отображают список (или сетку, или карту и т. Д.) При изменении элемента в коллекции.
- Модели слушают представления, чтобы они могли изменять состояние, возможно, при редактировании формы.
Разделение ваших объектов таким образом и общение с помощью событий означает, что вы никогда не запутаетесь в узлах, а добавлять новые компоненты и поведение легко. Ваши новые компоненты просто должны прослушивать другие объекты, уже находящиеся в системе.
Условные обозначения
Код, написанный для Backbone, следует свободному набору соглашений. Код DOM принадлежит в представлении. Код коллекции принадлежит коллекции. Бизнес-логика идет в модели. Другой разработчик, подхвативший вашу кодовую базу, сможет взяться за дело.
Подводя итог
Backbone - это легковесная библиотека, которая обеспечивает структуру вашего кода. Компоненты отделены и взаимодействуют через события, чтобы вы не оказались в беспорядке. Вы можете легко расширить свою кодовую базу, просто создав новый объект и сделав так, чтобы он соответствующим образом прослушивал существующие объекты. Ваш код будет чище, приятнее и удобнее в обслуживании.
Моя маленькая книга
Мне так понравился Backbone, что я написал небольшую вступительную книгу об этом. Вы можете прочитать это онлайн здесь: http://nicholasjohnson.com/backbone-book/
Я также разбил материал на короткий онлайн-курс, который вы можете найти здесь: http://www.forwardadvance.com/course/backbone. Вы можете пройти курс примерно за день.