Я пытался понять утилиту backbone.js с ее сайта http://documentcloud.github.com/backbone , но я все еще не мог понять многое.

Кто-нибудь может мне помочь, объяснив, как это работает и как это может помочь в написании лучшего JavaScript?

Backbone.js в основном представляет собой сверхлегкий фреймворк, который позволяет структурировать ваш код Javascript в стиле MVC (Model, View, Controller), где ...

Модель является частью вашего кода, который извлекает и заполняет данные,

Представление - это HTML-представление этой модели (представления меняются при изменении моделей и т. Д.)

и необязательный Controller, который в этом случае позволяет вам сохранять состояние вашего приложения Javascript через URL-адрес hashbang, например: http://twitter.com/#search?q=backbone.js

Некоторые плюсы, которые я обнаружил с помощью Backbone:

• Нет больше Javascript Spaghetti: код организован и разбит на семантически значимые файлы .js, которые позже объединяются с использованием JAMMIT

• Больше jQuery.data(bla, bla)не нужно: нет необходимости хранить данные в DOM, вместо этого хранить данные в моделях

• привязка событий просто работает

• чрезвычайно полезная библиотека утилит Underscore

• Код backbone.js хорошо документирован и отлично читается. Открыл глаза на ряд методов JS-кода.

Минусы:

• Мне потребовалось некоторое время, чтобы обернуть вокруг него голову и понять, как применить его к моему коду, но я новичок в Javascript.

Вот набор отличных руководств по использованию Backbone с Rails в качестве фонового:

CloudEdit: руководство по Backbone.js с Rails:

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/

ps Существует также замечательный класс Collection, который позволяет вам работать с коллекциями моделей и имитировать вложенные модели, но я не хочу с самого начала сбивать вас с толку.

Если вы собираетесь создавать сложные пользовательские интерфейсы в браузере, вы, вероятно, в конечном итоге изобрели большинство частей, составляющих фреймворки, такие как Backbone.js и Sammy.js. Таким образом, вопрос в том, строите ли вы что-то достаточно сложное в браузере, чтобы заслужить его использование (чтобы вы сами не придумали одно и то же).

Если то, что вы планируете построить, это то, где пользовательский интерфейс регулярно меняет то, как он отображается, но не идет на сервер, чтобы получить целые новые страницы, то вам, вероятно, нужно что-то вроде Backbone.js или Sammy.js. Кардинальным примером чего-то подобного является GMail от Google. Если вы когда-либо использовали его, вы заметите, что он загружает один большой кусок HTML, CSS и JavaScript при первом входе в систему, а затем после этого все происходит в фоновом режиме. Он может переключаться между чтением электронной почты и обработкой входящих сообщений, поиском и повторным просмотром всех них, даже не запрашивая рендеринга целой новой страницы.

Это именно то приложение, в котором эти фреймворки делают проще в разработке. Без них вы либо в конечном итоге соберете воедино разнообразный набор отдельных библиотек, чтобы получить части функциональности (например, jQuery BBQ для управления историей, Events.js для событий и т. Д.), Либо закончите сборку самостоятельно. и необходимость поддерживать и проверять все самостоятельно. Сравните это с чем-то вроде Backbone.js, на котором тысячи людей смотрят его на Github, сотнями вилок, где люди могут работать над ним, и сотнями вопросов, которые уже задавались и отвечали здесь на Stack Overflow.

Но все это не имеет никакого значения, если то, что вы планируете построить, не достаточно сложно, чтобы стоить кривой обучения, связанной с фреймворком. Если вы все еще создаете сайты на PHP, Java или что-то еще, где внутренний сервер все еще выполняет всю тяжелую работу по созданию веб-страниц по запросу пользователя, а JavaScript / jQuery просто мешает этому процессу, вы не ' не нужны или еще не готовы к Backbone.js.

Магистраль это ...

... очень небольшая библиотека компонентов, которые вы можете использовать для организации вашего кода. Он поставляется в виде одного файла JavaScript. Исключая комментарии, он содержит менее 1000 строк реального JavaScript. Это разумно написано, и вы можете прочитать все это за пару часов.

Это интерфейсная библиотека, вы включаете ее на веб-страницу с помощью тега script. Он влияет только на браузер и мало говорит о вашем сервере, за исключением того, что в идеале он должен предоставлять спокойный API.

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

Магистраль для ...

... добавление структуры в JavaScript.

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

1. Где я буду хранить свои данные?
2. Где я буду размещать свои функции?
3. Как я буду связывать свои функции вместе, чтобы они вызывались разумным образом и не превращались в спагетти?
4. Как я могу сделать этот код поддерживаемым разными разработчиками?

Магистраль стремится ответить на эти вопросы, давая вам:

• Модели и Коллекции, чтобы помочь вам представить данные и коллекции данных.
• Представления, чтобы помочь вам обновить 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 . Вы можете пройти курс примерно за день.

Вот интересная презентация:

Введение в Backbone.js

Подсказка (из слайдов):

• Рельсы в браузере? Нет .
• MVC фреймворк для JavaScript? Сорта .
• Большой толстый конечный автомат? ДА !

Backbone.js - это JavaScript-фреймворк, помогающий организовать ваш код. Это буквально основа, на которой вы строите свое приложение. Он не предоставляет виджеты (такие как jQuery UI или Dojo).

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

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

Это довольно хорошее вступительное видео: http://vimeo.com/22685608

Если вы ищете больше о Rails и Backbone, у Thoughtbot есть эта довольно хорошая книга (не бесплатная): https://workshops.thoughtbot.com/backbone-js-on-rails

Я должен признать, что все «преимущества» MVC никогда не делали мою работу проще, быстрее или лучше. Это просто делает весь опыт кодирования более абстрактным и отнимает много времени. Обслуживание - это кошмар, когда кто-то пытается отладить представление о том, что означает разделение. Не знаю, сколько из вас когда-либо пытались обновить сайт FLEX, который использовал Cairngorm в качестве модели MVC, но то, что для обновления может занять 30 секунд, часто может занять более 2 часов (поиск / отслеживание / отладка только для поиска одного события). ). MVC был и остается для меня «преимуществом», которое вы можете набить.

Вот краткий пост Get Started, который я написал на 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 Pattern с помощью java-скрипта

С позвоночником вы получаете свободу делать практически все, что пожелаете. Вместо того, чтобы пытаться пробиться через API и настроить, я бы использовал Backbonejs для его простоты и легкости реализации. Опять же, трудно сказать, что вам нужно из двух: библиотека, компонент

Основа была создана Джереми Ашкенасом, который также написал CoffeeScript. Как приложение, насыщенное JavaScript, то, что мы теперь знаем как Backbone, отвечало за структурирование приложения в целостную кодовую базу. Underscore.js, единственная зависимость магистрали, также была частью приложения DocumentCloud.

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

Дополнительные преимущества использования Backbone.js

1. Смотрите Backbone как библиотеку, а не как фреймворк
2. Javascript теперь организован структурированным образом, модель (MVVM)
3. Большое сообщество пользователей

Он также добавляет маршрутизацию с использованием контроллеров и представлений с KVO. С его помощью вы сможете разрабатывать приложения "AJAXy".

Рассматривайте это как облегченную структуру Sproutcore или Cappuccino.

Поверьте мне, это шаблон проектирования MVC на стороне клиента. Он сэкономит вам массу кода, не говоря уже о более чистом и понятном коде, более простом в обслуживании кода. Сначала может быть немного сложно, но поверьте мне, это отличная библиотека.

Уже так много хороших ответов. Backbone js помогает поддерживать организованный код. Изменение модели / коллекции обеспечивает автоматическую визуализацию представлений, что снижает накладные расходы на разработку.

Даже при том, что это обеспечивает максимальную гибкость для разработки, разработчики должны быть осторожны, чтобы уничтожить модели и правильно удалить представления. В противном случае возможна утечка памяти в приложении.

Веб-приложение, включающее много пользовательского взаимодействия со многими AJAX-запросами, которое нужно время от времени менять и которое работает в режиме реального времени (например, Facebook или StackOverflow), должно использовать инфраструктуру MVC, такую ​​как Backbone.js. Это лучший способ создать хороший код.

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

Backbone дает вам MVC на стороне клиента, и все преимущества, вытекающие из этого.