Я попытался понять полезность backbone.js со своего сайта http://documentcloud.github.com/backbone, но я все еще не мог понять много.
Может ли кто-нибудь помочь мне, объяснив, как это работает и как это может быть полезно при написании лучшего JavaScript?
Backbone.js - это в основном инфраструктура uber-light, которая позволяет вам структурировать ваш код Javascript в стиле MVC (Model, View, Controller), где...
Модель является частью вашего кода, который извлекает и заполняет данные,
Просмотр - это HTML-представление этой модели (изменение представлений при изменении моделей и т.д.)
и необязательный Контроллер, который в этом случае позволяет вам сохранить состояние вашего приложения Javascript с помощью URL-адреса hashbang, например: http://twitter.com/#search?q=backbone.js
Некоторые профи, которые я обнаружил с помощью Backbone:
Больше нет Javascript Spaghetti: код организован и разбит на семантически значимые .js файлы, которые позже объединены с помощью JAMMIT
Больше jQuery.data(bla, bla): нет необходимости хранить данные в DOM, хранить данные в моделях вместо
привязка событий работает только
чрезвычайно полезная библиотека утилиты Underscore
Код backbone.js хорошо документирован и отлично читается. Открыл глаза на ряд методов кода JS.
Минусы:
Вот набор замечательных руководств по использованию Backbone with Rails в качестве исходного кода:
CloudEdit: учебное пособие Backbone.js с рельсами:
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/
p.s. Существует также этот замечательный класс Коллекция, который позволяет обрабатывать коллекции моделей и имитировать вложенные модели, но я не хочу смущать вас с самого начала.
Если вы собираетесь создавать сложные пользовательские интерфейсы в браузере, то вы, вероятно, обнаружите, что в конце концов изобретаете большинство частей, которые составляют рамки, такие как Backbone.js и Sammy.js. Поэтому вопрос заключается в том, что вы строите что-то достаточно сложное в браузере, чтобы заслужить его использование (так что вы сами не изобретаете то же самое).
Если то, что вы планируете строить, - это то, где пользовательский интерфейс регулярно меняет способ отображения , но не выходит на сервер, чтобы получить целые новые страницы, тогда вам, вероятно, понадобится что-то вроде Backbone.js или Sammy. JS. Основным примером такого рода является Google GMail. Если вы когда-либо использовали его, вы заметите, что он загружает один большой кусок HTML, CSS и JavaScript при первом входе в систему, а затем после этого все происходит в фоновом режиме. Он может перемещаться между чтением электронной почты и обработкой входящей почты, а также повторным просмотром и повторным просмотром всех них, не запрашивая при этом всю новую страницу.
Это такое приложение, которое эти рамки превосходят при упрощении разработки. Без них вы либо в конце концов объедините разнообразный набор отдельных библиотек, чтобы получить части функциональности (например, jQuery BBQ для управления историей, Events.js для событий и т.д.), Или вы сами все построите и нужно также все контролировать и проверять сами. Сравните это с чем-то вроде Backbone.js, в котором тысячи людей смотрят его на Github, сотни вилок, на которых люди могут работать над этим, и сотни вопросов уже заданы и отвечают здесь на Stack Overflow.
Но ничто из этого не имеет значения, если то, что вы планируете строить, недостаточно сложно, чтобы стоить кривая обучения, связанная с каркасом. Если вы все еще строите PHP, Java или что-то еще, где сервер back-end по-прежнему делает все тяжелое поднятие веб-страниц по запросу пользователя, а JavaScript/jQuery - только обледенение в этом процессе, t понадобится или еще не готова для Backbone.js.
... очень маленькая библиотека компонентов, которую вы можете использовать для организации вашего кода. Он поставляется в виде единого файла JavaScript. Исключая комментарии, он имеет менее 1000 строк фактического JavaScript. Это разумно написано, и вы можете прочитать все это через пару часов.
Это внешняя библиотека, вы включаете ее на свою веб-страницу с тегом script. Это влияет только на браузер и мало говорит о вашем сервере, за исключением того, что он должен в идеале выставить ненадежный API.
Если у вас есть API, у Backbone есть несколько полезных функций, которые помогут вам поговорить с ним, но вы можете использовать Backbone для добавления интерактивности к любой статической HTML-странице.
... добавление структуры в JavaScript.
Поскольку JavaScript не применяет какие-либо конкретные шаблоны, приложения JavaScript могут стать очень грязными очень быстро. Любой, кто создал что-то, кроме тривиального в JavaScript, скорее всего столкнется с такими вопросами, как:
Backbone пытается ответить на эти вопросы, предоставив вам:
Мы называем это шаблоном MV *. Модели, виды и дополнительные опции.
Несмотря на первоначальные появления, Backbone фантастически светлый, он почти ничего не делает. Что он делает, очень полезно.
Он дает вам набор небольших объектов, которые вы можете создать, и которые могут генерировать события и слушать друг друга. Вы можете создать небольшой объект для представления комментария, например, а затем небольшой объект commentView для представления отображения комментария в определенном месте в браузере.
Вы можете указать commentView прослушать комментарий и перерисовать его, когда комментарий изменится. Даже если у вас есть один и тот же комментарий, отображаемый в нескольких местах на вашей странице, все эти представления могут прослушивать одну и ту же модель комментариев и оставаться в синхронизации.
Этот способ составления кода помогает вам не запутываться, даже если ваша кодовая база становится очень большой при многих взаимодействиях.
При запуске обычно хранить ваши данные либо в глобальной переменной, либо в DOM как атрибуты данных. У обоих из них есть проблемы. Глобальные переменные могут конфликтовать друг с другом и, как правило, плохие. Атрибуты данных, хранящиеся в DOM, могут быть только строками, вам придется анализировать их снова и снова. Трудно хранить такие вещи, как массивы, даты или объекты, и анализировать данные в структурированной форме.
Атрибуты данных выглядят следующим образом:
<p data-username="derek" data-age="42"></p>
Магистраль решает это, предоставляя объект Model для представления ваших данных и связанных с ними методов. Скажем, у вас есть список todo, у вас будет модель, представляющая каждый элемент в этом списке.
Когда ваша модель обновляется, она запускает событие. Возможно, у вас есть привязка к этому конкретному объекту. Вид прослушивает события изменения модели и повторно отображает себя.
Магистраль предоставляет вам объекты View, которые общаются с DOM. Все функции, которые управляют DOM или прослушивают DOM-события, идут здесь.
A View обычно реализует функцию рендеринга, которая перерисовывает весь вид или, возможно, часть представления. Нет никаких обязательств по реализации функции рендеринга, но это общее соглашение.
Каждое представление привязано к определенной части DOM, поэтому у вас может быть searchFormView, который только прослушивает форму поиска, и shoppingCartView, который отображает только корзину покупок.
Представления обычно также привязаны к определенным моделям или коллекциям. Когда модель обновляется, она запускает событие, которое прослушивает просмотр. В представлении они могут вызвать рендер, чтобы перерисовать себя.
Аналогично, когда вы вводите форму, ваше представление может обновлять объект модели. Каждый другой вид, прослушивающий эту модель, затем вызывает свою собственную функцию рендеринга.
Это дает нам четкое разделение проблем, которые делают наш код аккуратным и аккуратным.
Вы можете реализовать свою функцию рендеринга любым удобным для вас способом. Вы можете просто добавить 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. Вы можете закончить курс примерно через день.
Здесь интересная презентация:
Подсказка (из слайдов):
Backbone.js - это среда JavaScript, которая помогает вам организовать ваш код. Это буквально основа, на которой вы создаете свое приложение. Он не содержит виджеты (например, jQuery UI или Dojo).
Он дает вам классный набор базовых классов, которые вы можете расширить, чтобы создать чистый код JavaScript, который взаимодействует с конечными точками RESTful на вашем сервере.
JQuery и Mootools - это всего лишь набор инструментов с множеством инструментов вашего проекта. Магистраль действует как архитектура или магистраль для вашего проекта, на котором вы можете создать приложение с помощью JQuery или Mootools.
Это довольно хорошее вступительное видео: http://vimeo.com/22685608
Если вы ищете больше на Rails и Backbone, Thoughtbot имеет эту довольно хорошую книгу (не бесплатно): https://workshops.thoughtbot.com/backbone-js-on-rails
Я должен признать, что все "преимущества" MVC никогда не делали мою работу проще, быстрее или лучше. Это просто делает весь код более абстрактным и трудоемким. Обслуживание - это кошмар, когда вы пытаетесь отладить кого-то elses-концепцию того, что означает разделение. Не знаю, сколько из вас когда-либо пытались обновить сайт FLEX, который использовал Cairngorm в качестве модели MVC, но то, что должно занять 30 секунд для обновления, часто может занимать более 2 часов (поиск/трассировка/отладка только для того, чтобы найти одно событие). MVC был и остается для меня "преимуществом", которое вы можете использовать.
Вот краткое сообщение о начале работы, которое я написал на BackboneJS. Надеюсь, поможет! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx
backbone.js Model-View-Controller (MVC) с JavaScript но Extjs лучше, чем магистраль для шаблона MVC, java script
С позвоночником вы получили свободу делать почти все, что хотите. Вместо того, чтобы пытаться развиваться через api и настраивать, я бы использовал Backbonejs для простоты и простоты реализации. Снова трудно сказать, что вам нужно из двух, это библиотека, другая компонента
Магистраль была создана Джереми Ашкенасом, который также написал CoffeeScript. Как приложение для работы с JavaScript, то, что мы теперь знаем как Backbone, отвечало за структурирование приложения в когерентную базу кода. Underscore.js, только зависимость от базового блока, также была частью приложения DocumentCloud.
Backbone помогает разработчикам управлять моделью данных в своем клиентском веб-приложении с максимальной дисциплиной и структурой, как вы бы получили в традиционной логике приложений на стороне сервера.
Дополнительные преимущества использования Backbone.js
Он также добавляет маршрутизацию с использованием контроллеров и представлений с помощью KVO. Вы сможете создавать с ним приложения AJAXy.
Посмотрите на него как облегченный дизайн Sproutcore или Cappuccino.
Является шаблоном проектирования MVC на стороне клиента, поверьте мне.. Он собирается сэкономить вам тонны кода, не говоря уже о более чистом и понятном коде, более простой в обслуживании код. Сначала может быть немного сложнее, но поверьте мне, это отличная библиотека.
Веб-приложение, включающее множество пользовательских взаимодействий со многими запросами AJAX, которые необходимо время от времени менять, и которые запускаются в реальном времени (например, Facebook или StackOverflow), должно использовать структуру MVC, такую как Backbone.js, Это лучший способ создать хороший код.
Если приложение хотя и небольшое, то Backbone.js является излишним, особенно для пользователей в первый раз.
Магистраль дает вам MVC на стороне клиента и все преимущества, вытекающие из этого.