Знакомство с фреймворком Backbone JavaScript, сторонними библиотеками и создание веб-приложения в стиле «блог».
Если вы когда-либо пользовались Hulu, Wordpress, AirBnB или посещали веб-сайт USA Today, значит, вы использовали веб-приложение. В частности, веб-приложение, построенное на платформе BackboneJS.
Конечно, существует множество веб-приложений и множество фреймворков. Другие популярные JavaScript-фреймворки включают EmberJS и AngularJS - все они великолепны, я просто предпочитаю Backbone, потому что работаю с ним на регулярной основе.
К сожалению, теоретически вы могли бы написать веб-приложение, даже не касаясь фреймворка ... Это сделало бы вас сумасшедшим. Фреймворки используют так называемый архитектурный паттерн Контроллер представления модели (MVC). Я мог бы очень долго рассказывать о MVC, но все, что вам нужно знать, это то, что он работает, стандартен, а страница в Википедии на нем довольно короткая, так что прочтите об этом там.
Если бы вы были на веб-сайте BackboneJS и читали любую документацию, вы бы видели такие вещи, как модели, коллекции и представления. Я помню, как изо всех сил пытался понять, что именно представляет собой коллекция, как работает модель и где во всем этом находится контроллер? Если фреймворки должны быть ориентированы на MVC, то почему я слышу только о модели и представлении? Потому что мир безумный и несправедливый, вот почему.
Просто шучу.
Когда мы перейдем к этим частям структуры, я объясню их в меру своих возможностей.
Поговорим о проекте: Super Simple Backbone Blog. Если вы читаете это на Medium, а я думаю, что вам и должно быть, если только вы не из будущего (я понимаю вас), то конечный результат этого небольшого приложения должен показаться вам довольно знакомым. Нравится личный блог. Мы позволим «пользователю» создавать сообщения в блогах, удалять и даже обновлять их.
НАСТРОЙКА
Нам нужно создать каталог, в котором будет жить наше приложение. Я храню свои проекты в каталоге под названием development, внутри каталога development я создаю каталог Super Simple Backbone Blog , Я буду называть эту папку корневой.
Давайте начнем с создания каталога libs в корне для хранения всех js-библиотек наших поставщиков. Сторонние библиотеки JavaScript чрезвычайно полезны, и вы будете часто их использовать. Но вы уже должны знать об этом, если читаете «JavaScript для кошек. Backbone требует UnderscoreJS, поэтому мы поместим его в библиотеки, мы также будем полагаться на jQuery, Handlebars и JSON2. Поместите все эти библиотеки в каталог libs, включая Backbone.
Добавьте каталог css в корневой каталог. Поместите туда Bootstrap, поверьте мне, это облегчит жизнь, если вы изучите бутстрап - с таким же успехом можно начать прямо сейчас.
Затем давайте возьмем файл index.html. Сохраните это в корень.
Вот как все должно выглядеть:
Если бы вы открыли это в Chrome прямо сейчас, вы бы увидели свою скучную html-страницу. Молодец. Откройте инструменты разработчика и проверьте консоль, чтобы убедиться в отсутствии ошибок.
СОЗДАНИЕ ПРИЛОЖЕНИЯ
Создайте каталог app в корневом каталоге. В app создайте файл app.js. Начнем с содержания фрагмента ниже:
Давай поговорим о том, что здесь происходит. app.js - это собственно само приложение - именно здесь мы используем Backbone, поэтому справедливо предположить, что все это для вас в новинку.
Первое, что мы делаем, это создаем View: DashboardView:
var DashboardView = Backbone.View.extend({ });
Backbone Views создают элемент DOM (a ‹div› ‹/div›, если быть точным, но вы можете делать его как хотите) по умолчанию, вы можете думать о View как о занимающем пространство между этими элементами. Вы можете ссылаться на элемент, который занимает это представление, как this.el или $ el. Помните об этом, потому что мы будем часто это видеть.
Мы назначаем представлению шаблон Handlebars:
var DashboardView = Backbone.View.extend({
template: Handlebars.compile( $(“#dashboard-view-template”).html() ),
Мы очень скоро поместим наши шаблоны Handlebars в index.html. По сути, то, что мы здесь сделали, является шаблоном для этого представления. Большинство, если не все, веб-приложения являются динамическими, для этого мы используем шаблоны. Вы не представляете, какие сообщения в блогах будут создавать ваши пользователи, поэтому вы заключаете «их» в шаблон, который будет обновляться динамически.
Каждое представление в Backbone имеет функцию initialize: function (), независимо от того, определяете вы ее или нет. Я определил это, потому что хочу, чтобы это представление выполнялось render () сразу после его создания. Все, что вы вставляете в initialize (), будет выполняться по порядку при создании экземпляра представления.
var DashboardView = Backbone.View.extend({
template: Handlebars.compile( $(“#dashboard-view-template”).html() ),
initialize: function () {
this.render();
},
render: function () {
this.$el.html(this.template({greeting:”This will display a list of our blog posts”}));
}
});
Каждое представление в Backbone имеет render: function (). В этом случае render () происходит сразу после создания этого представления из-за того, что он вызывается в initialize (). render () передает объект со свойством «приветствие», а «приветствие» имеет значение «Это отобразит список наших сообщений в блоге», поэтому мы можем получить доступ к приветствию внутри шаблона и отобразить все, что происходит с этим значением. быть.
Вы можете подумать о том, как работает render (), сказав: «HTML внутри элемента dom этого представления должен быть тем же, что и шаблон, а также давайте передадим этот объект с приветствием свойства».
Вы должны уметь «перевести» строку ниже, чтобы отразить это:
this.$el.html(this.template({greeting:”This will display a list of our blog posts”}));
}
Это все, что касается представления DashboardView. Спустившись вниз, у нас есть AppRouter. Backbone's Router довольно легко понять, и я рекомендую вам использовать его в будущем (одностраничные приложения - это здорово, но вы обычно хотите, чтобы кнопка возврата вашего пользователя работала правильно, а URL-адрес точно отражал, где бы они ни находились - это то, что делает маршрутизатор… на самом деле, просто прочтите о маршрутизаторе, прежде чем продолжить)
Маршрутизатор - это в основном набор маршрутов, в нашем случае у нас просто значение по умолчанию: dashboardRoute
var AppRouter = Backbone.Router.extend({
routes: {
‘’: ‘dashboardRoute’,
Обратите внимание на пустой маршрут слева от двоеточия. Это означает, что это то место, где приложение установлено по умолчанию. Справа от двоеточия у нас есть dashboardRoute, который по сути является просто функцией, хранящейся внутри AppRouter:
var AppRouter = Backbone.Router.extend({
routes: {
‘’: ‘dashboardRoute’,
‘dashboard’: ‘dashboardRoute’,
‘create-blog’: ‘createBlogRoute’,
},
dashboardRoute: function () {
var dashboardView = new DashboardView();
$(“#content-container”).html(dashboardView.el);
},
Вы можете представить себе маршрутизатор, работающий следующим образом: «Браузер перешел на страницу по умолчанию, позволяет запустить функцию DashboardRoute. Хорошо, dashboardRoute хочет, чтобы я создал экземпляр DashboardView и назвал его dashboardView, отлично - я понял! Хорошо, теперь мне нужно найти в index.html элемент с идентификатором контейнера содержимого. Я нашел это! Хорошо, давайте поместим HTML-код dashboardView в контейнер содержимого. Хорошо, моя работа сделана! »
Итак, AppRouter сделал все необходимое, когда браузер пользователя перешел на страницу по умолчанию. И все это произошло за… наносекунды или что-то в этом роде. Не знаю, но очень быстро. Как бы то ни было - на этом этапе инициализацию () представления DashboardView берет на себя, и мы рассмотрели, что она делает.
Прежде чем мы продолжим, давайте потратим секунду, чтобы понять, что такое экземпляр, например, когда вы создаете экземпляр представления. DashboardView - это представление, которое делает то, что делает, в зависимости от того, что вы ему приказываете. Но это НИЧЕГО, пока вы не создадите его экземпляр. Это просто ракушка, штамп без чернил.
Когда ты говоришь:
var whatever = new DashboardView();
Теперь что угодно - это ЧТО-ТО, и это все, чем является DashboardView. Представления - это просто объекты JavaScript ... Если вы не понимаете, о чем я говорю, ПРОЧИТАЙТЕ JAVASCRIPT ДЛЯ КОШЕК. ФУ.
Хорошо, мы завершаем app.js этими двумя строками:
var appRouter = new AppRouter(); Backbone.history.start();
Угадай, что мы здесь сделали? Мы создали экземпляр AppRouter и назвали его appRouter. Мы сделали это, потому что следующая строка фактически включает маршрутизатор.
ОБНОВИТЬ INDEX.HTML ШАБЛОНАМИ
Прямо сейчас у нас есть эти загадочные шаблоны, которые мы используем в app.js. Поместим их в index.html и обновим также некоторые другие HTML:
Во-первых, избавляемся от наших
<h1>Super Simple Backbone Blog</h1>
Мы заменяем его навигационным меню. Я использовал для этого Bootstrap, потому что это быстро и легко. Вы можете узнать больше о Bootstrap на сайте getboostrap.com. Обратите внимание на ссылки в навигационном меню. Мы добавим их к нашему маршрутизатору позже.
Затем мы добавляем новый div с идентификатором content-container. Помните, что маршрутизатор ищет элемент с идентификатором content-container? Теперь он найдет его и поместит в этот элемент dashboardView. Говоря о dashboardView, нам нужно создать его шаблон, и это следующее, что мы делаем:
<script type="text/template" id="dashboard-view-template">
<h1>Dashboard</h1>
{{greeting}}
</script>
Во-первых, давайте установим, что этот не отображается на странице, он заключен в тег скрипта. Handlebars использует это - сам index.html ничего не делает с этими шаблонами. Он будет отображаться на странице, когда представление Backbone вызывает шаблон для размещения в элементе представления. Ты все еще со мной? Хороший.
Первым делом в этом шаблоне является стандартный тег заголовка с Dashboard. Самое интересное - это {{приветствие}}. Помните в панели управления, когда мы это сделали:
this.$el.html(this.template({greeting:”This will display a list of our blog posts”}));
}
Handlebars ищет это свойство «приветствие», и он заменит {{приветствие}} любым значением «приветствия», которое мы передали в шаблон в dashboardView с помощью «Это отобразит список наших сообщений в блоге»! Это очень простая реализация динамических шаблонов, но вы можете увидеть, как это становится полезным для динамической информации. Позже мы еще больше воспользуемся этим.
Мы создали второй шаблон для create-blog-template. Угадайте, что ... Это означает, что мы собираемся добавить еще одно представление и обновить наш маршрутизатор!
Наконец, не забудьте добавить файл app.js в конец списка скриптов, нам нужно запустить приложение в какой-то момент.
<script src="libs/jquery-1.11.3.js"></script> <script src="libs/underscore-1.8.3.js"></script> <script src="libs/backbone-1.2.0.js"></script> <script src="libs/handlebars-v3.0.3.js"></script> <script src="libs/json2.js"></script> <script src="app/app.js"></script>
ОБНОВЛЯЙТЕ APP.JS НОВЫМ ВИДОМ И МАРШРУТАМИ
Вернемся к app.js, нам нужно добавить новое представление CreateBlogView и добавить маршруты, которые позволят пользователю действительно перемещаться:
Мы уже разбирались в том, что делают представления. В CreateBlogView не должно быть ничего, чего вы еще не понимали.
AppRouter немного изменился. Мы добавили еще два маршрута: дашборд и create-blog. Однако мы добавили только еще одну функцию маршрута, createBlogRoute - это потому, что и «», и «панель мониторинга» используют одну и ту же функцию dashboardRoute - они оба просто создают экземпляр dashboardView. createBlogRoute теперь создает экземпляр createBlogView.
Как вы, наверное, догадались, когда вы щелкаете ссылку «Панель управления» и / или «Создать блог» на панели навигации, приложение будет отображать правильный вид.
Откройте index.html в Chrome.
Спасибо за прочтение!
