1. Введение
Недавно я делаю фронтальную оптимизацию крупного проекта онлайн-банкинга. Мне нужно использовать оптимизацию Fat Client. Общая идея состоит в том, что фронт-энд использует запрос Ajax для получения данных из бэк-конца, вернуть его в формате Джейсона, а затем отображать его на странице. Поскольку эта система очень велика, Fat Client Solution неизбежно требует написания большого количества кода JS на клиенте. Я думаю, что для любой команды очень неудобно поддерживать большое количество неструктурированного кода. Так что за кость появилась в глазах.
Он предоставляет способ структурировать ваш код JS, позволяя вам организовать свой фронтальный код JS в объектно-ориентированном способе. Это как будто мы применяем доменную конструкцию на передней части. Мы можем разделить очень большой проект от модуля. Каждый модуль может быть разделен на представление, модель и маршрутизатор в соответствии с требованиями основы.
С помощью магистрали вы можете рассматривать свои данные как модели. С помощью моделей вы можете создавать данные, проверять данные, уничтожать или сохранить их на сервере. Когда операции на интерфейсе вызывают изменения в свойствах в модели, модель запустит событие изменения; Эти представления, используемые для отображения состояния модели, получат сообщение о том, что модель запускает изменение, а затем выпустит соответствующий ответ, и повторно подарил новые данные в интерфейс. В полном приложении магистрали вам не нужно писать клейкий код, чтобы получить узлы через специальные идентификаторы из DOM или вручную обновлять HTML -страницы, потому что при изменении модели представления будут легко обновлены.
2. Особенности
Backbone-это легкая фронтальная структура, используемая для структуры управления большим количеством JS на страницах, устанавливает беспроблемное соединение с серверами и видами, а также обеспечивает базовую основу для создания сложных приложений.
Позвольте мне кратко объяснить основные особенности и характеристики основы:
2.1 Легкий
Исходный код Backbone составляет всего около 1000 строк (после разложения и пустых строк), размер файла составляет всего 16 КБ, а библиотека зависимостей подчеркивает всего 29 КБ.
Вам нужно только потратить немного времени, чтобы легко понять внутреннюю реализацию основы; или написать небольшое количество кода, чтобы перегрузить некоторые механизмы основы; Если вы хотите сделать вторичную разработку на основе костяка, это не сложная вещь.
2.2 Структурирован
Магистраль может легко отделить данные, логику и представления на странице и организовать структуру кода в соответствии с основой. Вы можете назначить взаимодействие данных, бизнес -логику, пользовательский интерфейс и другую работу в проекте нескольким коллегам для разработки одновременно и упорядоченно организовать их вместе. В то же время это очень полезно для обслуживания и разработки крупных и сложных проектов.
2.3 Механизм наследования
В основе модули могут быть унаследованы. Вы можете организовать модели данных, коллекции и представления в вашем приложении объектно-ориентированным образом, чтобы сделать всю архитектуру более четкой; Вы также можете легко перегружать и расширить пользовательские методы.
2.4 Установите бесшовное соединение с сервером
Backbone имеет встроенный набор правил взаимодействия с данными сервера (если вы понимаете архитектуру отдыха, вы можете легко их понять), и синхронизация данных будет автоматически выполнена в модели. Разработчики фронт-энда должны работать только на данных клиента, а магистраль автоматически синхронизирует операционные данные на сервере.
Это очень интересная вещь, потому что интерфейс данных сервера является прозрачным для разработчиков фронта, и им больше не нужно заботиться о том, как взаимодействовать с сервером.
Тем не менее, интерфейс данных, предоставленный сервером, также должен быть совместимы с правилами магистрали. Для нового проекта мы можем попытаться использовать этот набор правил для создания интерфейса. Но если у вас уже есть стабильный набор интерфейсов в вашем проекте, вы можете беспокоиться о риске изменения интерфейса.
Неважно, мы можем адаптироваться к существующему интерфейсу данных, перегружая метод Backbone.sync. Для различных клиентских сред, мы также можем реализовать различные методы взаимодействия данных. Например: когда пользователь использует службу через браузер ПК, данные будут синхронизироваться с сервером в режиме реального времени; Когда пользователь использует службу через мобильный терминал, учитывая проблемы сетевой среды, мы можем сначала синхронизировать данные в локальной базе данных, а затем синхронизировать их на сервере, когда это необходимо. И они могут быть достигнуты путем просто перегрузки одного метода.
2.5 Управление событиями интерфейса
В MVC мы надеемся полностью отделить презентацию интерфейса и бизнес -логику, но для интерактивных событий, генерируемых пользователями (например, Click Events), мы часто получаем и связываем их с помощью методов привязки, аналогичных таковым в jQuery.
Представление в магистрали помогает нам организовать пользовательские события и методы выполнения упорядоченным образом, что только требует от нас объявления простого выражения, такого как:
События: {// При нажатии на элемент с идентификатором «Сохранить» выполните метод добавления представления «Нажмите #Save»: «Добавить», 'Mousedown .button': 'Show', 'mouseover .button': 'Hide'}В выражении имя события может быть любым событием DOM (например, Click, MouseOver, KeyPress и т. Д.), А элемент может быть любым селектором, поддерживаемым JQUERY (например, селектор тегов, селектор идентификации, селектор классов и т. Д.).
Представление автоматически свяжет события в выражении с элементом селектора. Когда событие элемента запускается, представление автоматически вызовет связанные методы в выражении.
2.6 Анализ легких шаблонов
Шаблонный анализ - это метод, предоставляемый в подчеркивании. Почему я представляю метод в подчеркивании при введении основных функций? Потому что этот метод может помочь нам лучшую отдельную структуру представления и логику, а подчеркивание - это библиотека, на которую должна полагаться макавая целая.
Методы анализа шаблонов позволяют нам смешивать и внедрять код JS в HTML -структуры, точно так же, как код Embed Java на страницах JSP:
<ul> <%для (var i = 0; i <len; i ++) {%> <li> <%= data [i] .title%> </li> <%}%> </li>Благодаря анализу шаблонов нам не нужно размирать строки при динамическом генерировании HTML -структур. Что еще более важно, мы можем самостоятельно управлять структурой HTML в представлении (например: различные состояния могут отображать различные HTML -структуры, мы можем определить несколько отдельных файлов шаблонов, загружать и рендеринг по мере необходимости).
2.7 Пользовательское управление событиями
В основе вы можете использовать метод включения или выключения для привязки и удаления пользовательских событий. В любом месте, вы можете использовать метод триггера для запуска этих связанных событий, и все методы, связанные с событием, будут выполнены, например:
var model = new Backbone.model (); // Привязан двух функций с пользовательским событием в модели модели Object Model.on ('custom', function (p1, p2) {// todo}); model.on ('custom', function (p1, p2) {// todo}); // запускает пользовательское событие, и две функции, связанные выше, будут называются model.trigger ('custom', 'value1', 'value2'); // Удалить все методы, связанные в пользовательской модели события. OFF ('Custom'); // запустить пользовательское событие, но функции не будут выполнены. Функции в событии были удалены в предыдущей шаге модели. Trigger ('Custom');Если вы знакомы с jQuery, вы обнаружите, что они очень похожи на методы Bind, Bunciled и Trigger в jQuery.
Кроме того, Backbone поддерживает специальное мероприятие «все». Когда событие, именованное «все», связано с объектом, метод, связанный в событии «Все», также будет запускаться при запуска любого события. Иногда этот метод может быть очень полезным, например, мы можем прослушать изменения в состоянии объекта через событие «все».
3. Роутер
В одностраничном приложении мы контролируем переключение и представление интерфейса через JavaScript и получаем данные с сервера через AJAX.
Проблема, которая может возникнуть, заключается в том, что когда пользователь хочет вернуться к предыдущей операции, он может обычно использовать кнопки браузера «спины» и «вперед», но результат заключается в том, что вся страница переключается, потому что пользователь не знает, что он находится на одной странице.
Для этой проблемы мы часто используем хэш (точку привязки) для записи текущего местоположения пользователя и прослушивания действий пользователя «вперед» и «возврат» через событие Onhashchange, но мы обнаружили, что некоторые нижние версии браузеров (например, IE6) не поддерживают событие Onhashchange.
Backbone обеспечивает функцию управления маршрутизацией. Через маршрутизатор, предоставленный костяком, мы можем связать адрес адреса и функцию событий вместе с помощью простого выражения, например:
var CustomRouter = backbone.router.extend ({routes: {'': 'index', // выполнять метод индекса, когда url hash находится в корневом каталоге: url# 'list': 'getList', // выполнять метод getList, когда url hash находится в списке node: url# detail 'detail's quem и пройти подробные данные как параметры, метод запроса: URL#List/1001 '*Ошибка': 'ShowerRor' // Выполнение ошибки, когда хэш URL не соответствует вышеуказанным правилам}, Индекс: Function () {alert ('index'); ShowerRor: function (error) {alert ('user hash:' + error); var Custom = new CustomRouter (); Backbone.history.start ();Пожалуйста, попробуйте скопировать этот код на вашу страницу и получить доступ к следующему адресу (где URL -адрес указывает адрес вашего страницы):
Urlurl#listurl#detail/1001url#hash1url#hash2
Пожалуйста, постарайтесь использовать кнопки браузера «Back» и «Forward», чтобы переключаться туда -сюда на только что введенный адрес, который вы только что ввели.
Вы можете видеть, что при изменении URL -хэша будет выполнено связанный метод. Когда встречается неопределенный хэш, будет выполнен метод душа, и неопределенный хэш передается методу.
Backbone по умолчанию будет записывать изменения адреса через хэш. Для браузеров с более низкими версиями, которые не поддерживают Onhashchange, изменения хеш будут контролироваться через сердцебиение SetInterval, поэтому вам не нужно беспокоиться о проблемах совместимости браузера.
Для браузеров, которые поддерживают функцию HTML5 PushState, Backbone также позволяет создавать персонализированные URL -адреса через PushState, но это требует некоторой адаптации вашего веб -сервера.
3. Применимость основы
Магистраль не так применима, как jQuery, и если вы планируете создать большое или сложное веб-приложение для одного страницы, магистраль более подходит.
Если вы хотите применить основу на странице вашего веб -сайта, и на странице нет сложной логики и структуры, то это сделает вашу страницу более громоздкой и трудной для обслуживания.
Если ваш проект не является сложным, но вам очень нравится определенная его особенность (может быть модель данных, управление просмотром или маршрутизатор), то вы можете извлечь эту часть исходного кода из основной цепи, потому что в основной цепи зависимости между модулями не очень сильны, и вы можете легко получить и использовать один из них.
4. Библиотека зависимостей
Вы не можете использовать основу независимо, потому что ее основные функции, операции DOM и Ajax все полагаются на сторонние библиотеки.
4.1 Подчеркивается
(Необходимый)
Подчеркивание является базовой библиотекой функций для повышения эффективности разработки. Он инкапсулирует общие операции на наборах, массивах, объектах и функциях. Точно так же, как jQuery инкапсулирует объекты DOM, вы можете легко получить доступ и манипулировать внутренними объектами JavaScript через подчеркивание.
Подчеркивание также предоставляет некоторые очень практические методы функции, такие как функциональная дроссельная, анализ шаблонов и т. Д.
Я расскажу о некоторых основных методах подчеркивания в следующей главе, но до этого вы должны понять: подчеркивание - это библиотека, на которую должна рассчитывать основание, потому что многие реализации на основе основаны на подчеркивании.
4.2 jQuery и Zepto
(Необязательный)
Я считаю, что вы определенно будете знакомы с JQUERY, это кросс-браузер DOM и AJAX.
Для Zepto вы можете понимать его как «мобильную версию jQuery», потому что она меньше, быстрее и более подходит для работы в браузерах мобильных устройств, это тот же синтаксис, что и jQuery, так что вы можете использовать его, как с JQuery.
В настоящее время Zepto поддерживает только браузеры с ядром Webkit, поэтому он совместим с большинством мобильных систем, таких как iOS, Adnroid, Symbian, BlackBerry и Meego, в то время как для Windows Phone или OS Firefox OS, он еще не поддерживается.
Поскольку синтаксис jQuery и Zepto одинаковы, для магистрали у вас нет проблем с использованием jQuery или Zepto (конечно, вы не можете использовать оба одновременно).
В Backbone Dom Selector, Dom Event и Ajax используют метод jQuery. Причина, по которой они являются необязательными здесь, заключается в том, что вы не используете функцию синхронизации данных View и Ajax в основе, тогда вам не нужно импортировать их.
Если вы не хотите использовать jQuery или Zepto, но используйте другие или пользовательские библиотеки, если ваша библиотека реализует те же самые методы DOM, управление событиями и Ajax Syntax, то проблемы не будут.
Backbone позволяет динамически настраивать сторонние библиотеки, которые вам необходимо использовать с помощью метода SetDomlibrary, который часто используется для:
Хотя ваша пользовательская библиотека содержит методы с тем же синтаксисом, что и jQuery, глобальная переменная не является $, и вы хотите сохранить существующее имя. В настоящее время вы можете установить его на объект, на который ссылается метод SetDomlibrary.
Вы хотите проверить среду пользователя, чтобы решить, какая библиотека более подходит для использования. Например: если пользователь обращается к браузеру с помощью компьютера, загрузите jQuery и если пользователь обращается через мобильный терминал, загрузите Zepto.