JavaScript-библиотека Backbone.js
Особенности работы с Backbone.js. Создание структуры веб-приложений с помощью моделей с биндингами по ключу и пользовательскими событиями, коллекций с богатым набором методов с перечислимыми сущностями, представлений с декларативной обработкой событий.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | русский |
| Дата добавления | 22.03.2016 |
| Размер файла | 1,1 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Аннотация
Backbone. js придает структуру веб-приложениям с помощью моделей с биндингами по ключу и пользовательскими событиями, коллекций с богатым набором методов с перечислимыми сущностями, представлений с декларативной обработкой событий; и соединяет это все с вашим существующим REST-овым JSON API.
Содержание
- Введение
- События (Events)
- Модель (Model)
- Коллекции (Collection)
- Роутер (Router)
- История (History)
- Синхронизация (Sync)
- Представление (View)
- Утилиты (Utility)
- Мини чат на Backbone. js
- Заключение
- Список литературы
Введение
При работе с веб-приложением, которое включает в себя много JavaScript, первое, чему вы научитесь - это перестать связывать ваши данные с DOM, потому что это подходит только для создания простых JavaScript приложений, которые в конечном итоге выглядят, как запутанные груды jQuery-селекторов и коллбэков, которые отчаянно пытаются хранить актуализированные данные в UI, JavaScript логике и базе данных на сервере. Для сложных клиентских приложений часто бывает полезным более структурированный подход.
Работая с Backbone, вы представляете ваши данные как Модели (Models), которые могут быть созданы, провалидированы, удалены, и сохранены на сервере. Всякий раз, когда в интерфейсе изменяется атрибуты модели, модель вызывает событие "change"; все Представления (Views), которые отображают состояние модели, могут быть уведомлены об изменении атрибутов модели, с тем чтобы они могли отреагировать соответствующим образом - например, перерисовать себя с учетом новых данных. В готовом приложении на Backbone, вы не должны писать код, ищущий элемент с определенным id в DOM и обновлять HTML вручную. При изменении модели представление просто обновит себя самостоятельно.
События (Events)
Events - это модуль, который может расширить возможности любого объекта, давая ему способность отслеживать и вызывать именованные пользовательские события. События должны быть объявлены после примешивания модуля. В событие можно передавать аргументы.
var object = {};
_. extend (object, Backbone. Events);
object. on ("alert", function (msg) {
alert ("Сработало " + msg);
});
object. trigger ("alert", "событие");
Например, можно сделать удобный диспетчер событий, который будет координировать события между различными областями приложения.
Модель (Model)
Модели - это самое сердце любого JavaScript-приложения.
Они содержат как интерактивные данные, так и большую часть соответствующей логики: конвертации, валидации, вычисленные свойства и контроль доступа.
Вы расширяете Backbone.
Model методами своей предметной области, а Model предоставляет базовый набор функциональности по управлению изменениями. Пример ниже, демонстрирует создание модели описания пользователя.
App. Models. PesonModel = Backbone. Model. extend ({
defaults: {
name: 'Vlad',
age: 20,job: 'Web-developer'
}
});
Коллекции (Collection)
Коллекции - это упорядоченные наборы моделей.
Вы можете навесить слушателей: на событие "change", чтобы получать оповещения, когда любая модель в коллекции изменяется; на события "add" и "remove"; на получение (fetch) коллекции с сервера - и использовать полный набор методов Underscore. js.
Любое событие, которое сработает на модели в коллекции также сработает и напрямую - для удобства - на коллекции.
Это позволяет напрямую слушать события изменения отдельных атрибутов любой модели в коллекции.
Что бы создать коллекцию, сначала необходимо создать модель.
App. Models. PesonModel = Backbone. Model. extend ({
defaults: {
name: 'Vlad',
age: 20,job: 'Web-developer'
}
});
После чего, мы уже можем создать коллекцию, используя экземпляр нашей созданной модели.
App. Collentions. Friends = Backbone. Collection. extend ({
model: App. Models. FriendModel
});
Так же, при желании мы можем наполнить нашу коллекцию.
var friendsCollections = new App. Collentions. Friends ([
{
name: 'Andrei',
age: 22,job: 'Web-developer'
},
{
name: 'Denis',
age: 25,job: 'Web-developer'
},
{
name: 'Ivan',
age: 25,job: 'Web-developer'
}
]);
Роутер (Router)
Веб-приложения часто предоставляют возможность зафиксировать своё состояние, сделав закладку. Это делается с помощью добавления к URL фрагмента определённого вида. До недавнего времени для этих целей использовались исключительно хэши (#page), но с появлением History API стало возможно использовать URL обычного вида (/page). Backbone. Router предоставляет методы для маршрутизации на стороне клиента, а также связывания этих действий с событиями. Для браузеров, которые не поддерживают History API, Router весьма элегантно проделает то же самое, используя фрагментарную структуру URL.
Во время загрузки страницы, после того, как ваше приложение создаст все необходимые ему роутеры, не забудьте вызвать Backbone. history. start () или Backbone. history. start ({pushState: true}), чтобы задать начальное состояние приложения.
Создавая свой класс-маршрутизатор, нужно расширить Backbone. Router.
App. Router = Backbone. Router. extend ({
routes: {
'': 'index',
'profile': 'profile',
'friends': 'friends',
'settings': 'settings'
},
index: function () {
console. log ('Стартовая');
},
profile: function () {
},
friends: function () {
},
settings: function () {
}
});
После чего запускаем наш роутер.
new App. Router;
Backbone. history. start ();
История (History)
History служит глобальным роутером (в пределах фрейма), обрабатывая события hashchange или вызовы pushState, находя сопоставление с подходящим роутом и запуская коллбэки. Вам не надо даже вручную создавать ничего из этого - просто используйте ссылку на Backbone. history.
Поддержка pushState существует в Backbone в сугубо опциональной форме. Старые браузеры, которые не поддерживают pushState будут продолжать использовать хэш-фрагменты адресов, и если поддерживающий pushState браузер зайдёт на URL с хэшем, этот URL будет прозрачно заменён настоящим URL'ом. Отметьте, что использование таких адресов требует от веб-сервера корректной отдачи таких страниц, так что могут потребоваться изменения и на сервере. Например, если у вас есть роут /documents/100, ваш сервер должен отдать эту страницу, если браузер зайдёт на неё напрямую. Для полной индексации поисковиками лучше всего, если сервер генерирует полный HTML для страницы, но если речь идёт о веб-приложении, достаточно просто отдавать тот же контент, что и для корневой страницы, и дополнять оставшееся с помощью JS и представлений Backbone.
Когда созданы все ваши роутеры и все роуты корректно установлены, вызовите Backbone. history. start () чтобы начать отслеживать события hashchange и диспетчеризовать роуты.
Синхронизация (Sync)
Backbone. sync - функция, которую Backbone вызывает каждый раз, когда пытается прочитать/сохранить модель с/на сервер.
По умолчанию она использует (jQuery). ajax, чтобы делать RESTful JSON-запросы, и возвращает jqXHR. Её можно переопределить, чтобы использовать другую стратегию персистентности - WebSocket'ы, XML-транспорт, или localStorage.
Представление (View)
Представления в Backbone - это скорее соглашение, нежели код: они никак не влияют на ваш HTML и CSS, и могут быть использованы с любой шаблонной библиотекой.
Основная идея - организовать ваш интерфейс в логически выделенные представления, опирающиеся на модели, каждое из которых может быть обновлено независимо, когда модель изменяется, без необходимости перерисовывать страницу.
Вместо того, чтобы копаться в JSON-объекте, выискивать элемент в DOM-дереве и обновлять HTML вручную, вы привязываете метод render представления к событию "change" модели - и теперь везде, где бы ни отображались данные модели, они немедленно становятся актуальными.
Пример использования представлений или же как говорят программисты "Вьюхи".
App. Views. PersonView = Backbone. View. extend ({
tagName: 'div',
id: 'prof',
template: _. template ('<p>Имя: <%= name %><br> Возвраст: <%= age %><br> Работа: <%= job %></p>'),
initialize: function () {
this. render ();
},
render: function () {
this. $el.html (this. template (this. model. toJSON ()));
}
});
Утилиты (Utility)
Откатывает объект Backbone в предыдущее значение. Можно использовать возвращенное из Backbone. noConflict () значение, чтобы хранить ссылку на Backbone. Находит применение при внедрении Backbone на сторонние сайты, где вы не хотите испортить существующий Backbone.
Мини чат на Backbone. js
После изучения Бейкбона, мне поставили задачу написать мини-чат для браузера используя модели, представления, коллекции и роутер. Для начала я создал разметку страницы используя HTML5 и оформил используя CSS3.
HTML5 разметка.
Рис.1
Оформление с помощью CSS3.
Рис. 2
После этого был написан код на Backbone. Js
Рис. 3
Результат. Все имена выводятся из коллекции Backbone, события клика тоже прослушивает Backbone.
java script библиотека backbone
Рис. 4
Заключение
Если вы хотите, чтобы ваш код на JavaScript был более структурированным и понятным, то вам следует выбрать Backbone. js. По сути, бейкбон является библиотекой для JavaScript, но тут можно так же сказать, что это объектно-ориентированное программирование. Однако, тут всё очень просто и понятно.
Список литературы
1. http://backbonejs.ru/
2. https: // habrahabr.ru/post/127049/
3. https: // ru. wikipedia.org/wiki/Backbone. js
Размещено на Allbest.ru
...Подобные документы
Сравнительная характеристика, возможности и функции языков программирования JavaScript и PHP. Основные области их использования. Разработка интерактивного Web-приложения с применением JavaScript на примере теста по теме "Программирование на языке Delphi".
курсовая работа [19,3 K], добавлен 01.07.2014Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.
лекция [16,2 K], добавлен 05.02.2012Освоение принципов написания клиентских сценариев JavaScript, управляемых событиями. Связь собственной функции JavaScript с обрабатываемым событием. Оформление ссылок в виде графических кнопок, изменяющих свой вид при наведении на них указателя мыши.
лабораторная работа [605,9 K], добавлен 25.05.2016Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".
практическая работа [26,0 K], добавлен 04.02.2015Базовый синтаксис языка сценариев JavaScript. Создание страниц, включающих в себя программы, которые взаимодействуют с пользователем, управляют браузером и динамически создают HTML-содержимое. Работа с объектами, которые инкапсулируют данные и поведение.
лабораторная работа [58,6 K], добавлен 25.05.2016Размещение кода скрипта JavaScript непосредственно на HTML-странице. Сценарий JavaScript и список основных событий. Полезные конструкции на PHP. Некоторые функции для работы с массивами. Фрагмент кода JavaScript из "Эконометрической модели России".
презентация [331,2 K], добавлен 25.09.2013Типизация данных в JavaScript. Правила объявления локальных и глобальных переменных. Объявление и использование функций. Открытие и закрытие файла, запись в него и чтение из него. Создание теста с использованием средств языка программирования PHP скрипт.
контрольная работа [73,8 K], добавлен 25.01.2016Создание приложений: ProgressBar, вычисление по формуле, двумерный массив, калькулятор, медиа-плеер, одномерный массив, список, текстовый редактор. Создание различных обработчиков событий. Разработка заставки, окна ввода пароля и главной формы.
лабораторная работа [781,7 K], добавлен 22.01.2015Теоретические основы разработки Windows-приложений с использованием библиотеки MFC. Создание приложения с помощью Visual C++. Описание логической структуры приложения. Установка и запуск программы. Входные и выходные данные. Преимущество MFC библиотек.
курсовая работа [563,2 K], добавлен 21.06.2011Применение языков программирования в web-разработках. Создание документа с поддержкой гипертекста с помощью HTML. Использование JavaScript для программного доступа к объектам приложений. Perl - процедурный язык программирования; псевдообъектный язык PHP.
курсовая работа [260,9 K], добавлен 07.07.2013Функции технологии Ajax разработки Web-приложений: выполнение HTTP-запросов в клиентской части и анализ ответа XML-сервера. Создание данных объекта XMLHttpRequest для разных браузеров. Обработка с помощью сервлета. Функциональность задач в Ajax.
лабораторная работа [54,8 K], добавлен 06.06.2009Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).
лабораторная работа [31,0 K], добавлен 28.10.2010Характеристика Javascript функции с параметрами (аргументами). Возврат значений, глобальные и локальные переменные в функции. Все способы создания пользовательских функций в Javascript. Область видимости переменных. Рекурсивная функция Javascript.
лабораторная работа [75,8 K], добавлен 19.09.2019Создание структуры интеллектуального анализа данных. Дерево решений. Характеристики кластера, определение групп объектов или событий. Линейная и логистическая регрессии. Правила ассоциативных решений. Алгоритм Байеса. Анализ с помощью нейронной сети.
контрольная работа [2,0 M], добавлен 13.06.2014Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Работа с элементом управления в VB.net. Работа с файлами, организация последовательного доступа с помощью объектов Streareader и Streamwriter. Последовательный доступ с помощью класса File, программирование задач с использованием циклов с параметром.
лабораторная работа [644,8 K], добавлен 27.12.2013Разработка сайта "Библиотека онлайн": создание режима ведения системного каталога книг (по внутреннему номеру, наименованию), картотеки читателей (фамилия, адрес, телефон), поиск разными методами и просмотр информации, формирование посетителем заказа.
курсовая работа [43,2 K], добавлен 14.06.2010Создание системы управления базой данных "Библиотека" версии InterBase 6.5, выполненной в среде Delphi7. Создание таблиц СУБД: Читатель, Штраф, Выдача книги, Автор, Размещение книги, Экземпляр, Издательство, Произведения, Литературная форма, Жанр, Книга.
дипломная работа [907,3 K], добавлен 20.09.2013Цель инфологического моделирования базы данных. Создание с помощью СУБД Microsoft SQL Server шести сущностей с определенными атрибутами, представлений, основанных на соединении столбцов нескольких таблиц и связей между ними. Создание процедур и запросов.
курсовая работа [721,4 K], добавлен 29.11.2009Среда разработки C++ Builder. Использование видимых и невидимых компонентов. Прототип обработчика событий. Менеджер проектов. Установка опций проекта. Создание приложений в С++ Builder. Создание простейшего приложения. Размещение компонентов на форме.
курсовая работа [226,9 K], добавлен 24.03.2009
