Разработка одностраничных веб-приложений

Майкл С. Миковски, Джош К. Пауэлл

Разработка 
одностраничных 
веб-приложений

Foreword by Gregory D. Benson

Single Page
Web Applications

Michael S. Mikowski, Josh C. Powell

C предисловием Грегори Д. Бенсона

Разработка 
одностраничных 
веб-приложений

Москва, 2023

Майкл С. Миковски, Джош К. Пауэлл

2-е издание, электронное

УДК 004.738.5:004.45JavaScript
ББК 32.973.202-018.2
M59

M59
Миковски, Майкл С.
Разработка одностраничных веб-приложений / М. С. Миковски, 
Дж. К. Пауэлл ; пер. с англ. А. А. Слинкина. — 2-е изд., эл. — 1 файл pdf : 
514 с. — Москва : ДМК Пресс, 2023. — Систем. требования: Adobe Reader 
XI либо Adobe Digital Editions 4.5 ; экран 10". — Текст : электронный.
ISBN 978-5-89818-353-0

Если ваш сайт представляет собой набор дергающихся страниц, связанных ссылками, то вы отстали от жизни. Следующей ступенью вашей карьеры должны стать 
одностраничные приложения (SPA). В таком приложении отрисовка пользовательского интерфейса и бизнес-логика перенесены в браузер, а взаимодействие с сервером сводится к синхронизации данных. Пользователь работает с таким сайтом, как 
с персональным приложением на рабочем столе, что гораздо удобнее и приятнее. 
Однако разрабатывать, сопровождать и тестировать SPA нелегко.
В этой книге показано? как организуется командная разработка передовых SPA — 
проектирование, тестирование, сопровождение и развитие — с применением 
JavaScript на всех уровнях и без привязки к какому-то конкретному каркасу.
Попутно вы отточите навыки работы с HTML5, CSS3 и JavaScript и узнаете об 
использовании JavaScript не только в браузере, но также на сервере и в базе данных.

УДК 004.738.5:004.45JavaScript 
ББК 32.973.202-018.2

Электронное издание на основе печатного издания: Разработка одностраничных веб-приложений / 
М. С. Миковски, Дж. К. Пауэлл ; пер. с англ. А. А. Слинкина. — Москва : ДМК Пресс, 2014. — 512 c. — ISBN 
978-5-97060-072-6. — Текст : непосредственный.

Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было 
форме и какими бы то ни было средствами без  письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность технических 
ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность 
приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги.

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами 
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.

ISBN 978-5-89818-353-0
© 2014 by Manning Publications Co.
© Оформление, перевод, ДМК Пресс, 2014

Моим родителям, жене и детям.
Вы так многому меня научили, я всех вас люблю.
– М. С. М.

Моей жене Марианне. Спасибо тебе за то, что ты так покорно 
терпела, пока я писал эту книгу. Я люблю тебя.
– Дж. К. П.

Содержание

Предисловие ........................................................................................ 13

Вступление............................................................................................ 15

Благодарности .................................................................................... 16

Об этой книге .................................................................................................19

Об иллюстрации на обложке ............................................................25

Часть I. Введение в SPA ........................................................................26

Глава 1. Наше первое одностраничное 
приложение ....................................................................................................28
1.1. Определение, немного истории и несколько слов 
о предмете книги ..........................................................................................29
1.1.1. Немного истории ..............................................................................29
1.1.2. Почему SPA на JavaScript появились так поздно? ................30
1.1.3. Предмет книги ...................................................................................34
1.2. Создаем наше первое SPA .........................................................................36
1.2.1. Постановка задачи ............................................................................36
1.2.2. Общая структура файла .................................................................37
1.2.3. Настройка инструментов разработчика в Chrome ................38
1.2.4. Разработка HTML и CSS ...............................................................39
1.2.5. Добавление JavaScript-кода ..........................................................40
1.2.6. Изучение приложения с помощью инструментов 
разработчика в Chrome ..............................................................................46
1.3. Чем хорошо написанное SPA удобно пользователям .....................49
1.4. Резюме .............................................................................................................51

Глава 2. Новое знакомство с JavaScript .................................53
2.1. Область видимости переменной ............................................................55
2.2. Поднятие переменных ...............................................................................58
2.3. Еще о поднятии переменных и объекте контекста 
выполнения ....................................................................................................60
2.3.1. Поднятие ..............................................................................................60
2.3.2. Контекст выполнения и объект контекста выполнения .....62
2.4. Цепочка областей видимости ..................................................................66
2.5. Объекты в JavaScript и цепочка прототипов .....................................69
2.5.1. Цепочка прототипов ........................................................................73

Содержание  7

2.6. Функции – более пристальный взгляд ................................................78
2.6.1. Функции и анонимные функции ................................................78
2.6.2. Самовыполняющиеся анонимные функции ...........................79
2.6.3. Паттерн модуля – привнесение в JavaScript закрытых 
переменных ....................................................................................................82
2.6.4. Замыкания ..........................................................................................88
2.7. Резюме .............................................................................................................92

Часть II. Клиентская часть одностраничного 
приложения.....................................................................................................94

Глава 3. Разработка оболочки ........................................................96
3.1. Знакомимся с Shell .....................................................................................96
3.2. Организация файлов и пространств имен ..........................................98
3.2.1. Создание дерева файлов ................................................................98
3.2.2. HTML-файл приложения ........................................................... 100
3.2.3. Создание корневого пространства имен CSS ...................... 101
3.2.4. Создание корневого пространства имен JavaScript ........... 103
3.3. Создание функциональных контейнеров ........................................ 104
3.3.1. Стратегия .......................................................................................... 105
3.3.2. HTML-код модуля Shell .............................................................. 105
3.3.3. CSS-стили модуля Shell .............................................................. 106
3.4. Отрисовка функциональных контейнеров ..................................... 109
3.4.1. Преобразование HTML в JavaScript-код .............................. 110
3.4.2. Добавление HTML-шаблона в JavaScript-код .................... 111
3.4.3. Создание таблицы стилей для Shell ........................................ 113
3.4.4. Настройка приложения для использования Shell ............. 115
3.5. Управление функциональными контейнерами ............................. 116
3.5.1. Метод сворачивания и раскрытия окна чата ....................... 117
3.5.2. Добавление обработчика события щелчка мышью 
по окну чата ................................................................................................ 119
3.6. Управление состоянием приложения ............................................... 124
3.6.1. Какого поведения ожидает пользователь браузера? ......... 124
3.6.2. Стратегия работы с элементами управления 
историей ....................................................................................................... 125
3.6.3. Изменение якоря при возникновении события 
истории ......................................................................................................... 126
3.6.4. Использование якоря для управления состоянием 
приложения ................................................................................................ 128
3.7. Резюме .......................................................................................................... 135

 Содержание

Глава 4. Добавление функциональных модулей ......... 137
4.1. Стратегия функциональных модулей ............................................... 138
4.1.1. Сравнение со сторонними модулями ..................................... 139
4.1.2. Функциональные модули и паттерн «фрактальный 
MVC» ............................................................................................................ 141
4.2. Подготовка файлов функционального модуля .............................. 144
4.2.1. Планируем структуру каталогов и файлов .......................... 145
4.2.2. Создание файлов ........................................................................... 146
4.2.3. Что мы соорудили ......................................................................... 152
4.3. Проектирование API модуля ............................................................... 153
4.3.1. Паттерн якорного интерфейса .................................................. 153
4.3.2. API конфигурирования модуля Chat ..................................... 155
4.3.3. API инициализации модуля Chat ............................................ 156
4.3.4. Метод setSliderPosition из API модуля Chat ....................... 157
4.3.5. Каскадное конфигурирование и инициализация ............... 158
4.4. Реализация API функционального модуля .................................... 160
4.4.1. Таблицы стилей .............................................................................. 160
4.4.2. Модификация модуля Chat ....................................................... 166
4.4.3. Модификация модуля Shell ....................................................... 172
4.4.4. Прослеживание выполнения ..................................................... 179
4.5. Добавление часто используемых методов ....................................... 181
4.5.1. Метод removeSlider ....................................................................... 181
4.5.2. Метод handleResize ....................................................................... 183
4.6. Резюме .......................................................................................................... 188

Глава 5. Построение модели ......................................................... 189
5.1. Что такое модель ...................................................................................... 189
5.1.1. Что мы собираемся сделать ........................................................ 190
5.1.2. Что делает модель .......................................................................... 192
5.1.3. Чего модель не делает .................................................................. 193
5.2. Подготовка файлов модели, и не только .......................................... 194
5.2.1. Планируем структуру каталогов и файлов .......................... 194
5.2.2. Создание файлов ........................................................................... 196
5.2.3. Использование унифицированной библиотеки ввода ..... 202
5.3. Проектирование объекта people .......................................................... 202
5.3.1. Проектирование объекта person ............................................... 203
5.3.2. Проектирование API объекта people ...................................... 205
5.3.3. Документирование API объекта people ................................. 209
5.4. Реализация объекта people .................................................................... 210
5.4.1. Создание подставного списка людей ...................................... 212

Содержание  9

5.4.2. Начало реализации объекта people.......................................... 213
5.4.3. Завершение работы над объектом people .............................. 218
5.4.4. Тестирование API объекта people ............................................ 225
5.5. Реализация аутентификации и завершения сеанса в Shell........ 228
5.5.1. Проектирование пользовательского интерфейса 
аутентификации ........................................................................................ 229
5.5.2. Модификация JavaScript-кода модуля Shell ....................... 229
5.5.4. Тестирование аутентификации и завершения сеанса 
в пользовательском интерфейсе .......................................................... 233
5.6. Резюме .......................................................................................................... 234

Глава 6. Завершение модулей Model и Data ................... 235
6.1. Проектирование объекта chat .............................................................. 235
6.1.1. Проектирование методов и событий ...................................... 236
6.1.2. Документирование API объекта chat ..................................... 239
6.2. Реализация объекта chat ........................................................................ 240
6.2.1. Начинаем с метода join ................................................................ 240
6.2.2. Модификация модуля Fake для поддержки метода 
chat.join ......................................................................................................... 243
6.2.3. Тестирование метода chat.join ................................................... 246
6.2.4. Добавление средств работы с сообщениями в объект 
chat ................................................................................................................. 247
6.2.5. Модификация модуля Fake для имитации работы 
с сообщениями ........................................................................................... 252
6.2.6. Тестирование работы с сообщениями в чате ........................ 254
6.3. Добавление поддержки аватаров в модель ...................................... 256
6.3.1. Добавление поддержки аватаров в объект chat .................. 256
6.3.2. Модификация модуля Fake для имитации аватаров ........ 258
6.3.3. Тестирование поддержки аватаров .......................................... 259
6.3.4. Разработка через тестирование ................................................ 260
6.4. Завершение функционального модуля Chat .................................. 262
6.4.1. Модификация JavaScript-кода модуля Chat ........................ 263
6.4.2. Модификация таблиц стилей .................................................... 271
6.4.3. Тестирование пользовательского интерфейса чата ........... 276
6.5. Разработка функционального модуля Avatar ................................. 277
6.5.1. JavaScript-код модуля Avatar .................................................... 278
6.5.2. Создание таблицы стилей для модуля Avatar ..................... 284
6.5.3. Модификация модуля Shell и головного 
HTML-документа ..................................................................................... 285
6.5.4. Тестирование функционального модуля Avatar ................. 286

 Содержание

6.6. Привязка к данным и jQuery ................................................................ 287
6.7. Разработка модуля Data ......................................................................... 288
6.8. Резюме .......................................................................................................... 291

Часть III. Сервер SPA ............................................................................ 292

Глава 7. Веб-сервер .............................................................................. 294
7.1. Роль сервера ............................................................................................... 294
7.1.1. Аутентификация и авторизация ............................................... 294
7.1.2. Валидация ........................................................................................ 295
7.1.3. Сохранение и синхронизация данных ................................... 296
7.2. Node.js ........................................................................................................... 297
7.2.1. Почему именно Node.js? .............................................................. 297
7.2.2. Приложение «Hello World» для Node.js ................................ 298
7.2.3. Установка и использование Connect ....................................... 302
7.2.4. Добавление промежуточного уровня Connect .................... 304
7.2.5. Установка и использование Express ........................................ 305
7.2.6. Добавление промежуточного уровня 
в Express-приложение ............................................................................. 308
7.2.7. Окружения в Express .................................................................... 309
7.2.8. Обслуживание статических файлов с помощью 
Express .......................................................................................................... 310
7.3. Более сложная маршрутизация ........................................................... 312
7.3.1. CRUD-маршруты для управления пользователями ......... 312
7.3.2. Обобщенная маршрутизация для операций CRUD ......... 319
7.3.3. Перенос маршрутизации в отдельный модуль Node.js ..... 322
7.4. Добавление аутентификации и авторизации ................................. 327
7.4.1. Базовая аутентификация ............................................................ 327
7.5. Веб-сокеты и Socket.IO .......................................................................... 329
7.5.1. Простой пример применения Socket.IO ................................ 329
7.5.2. Socket.IO и сервер обмена сообщениями .............................. 333
7.5.3. Обновление JavaScript-кода с помощью Socket.IO ........... 334
7.6. Резюме .......................................................................................................... 338

Глава 8. Серверная база данных................................................ 339
8.1. Роль базы данных ..................................................................................... 339
8.1.1. Выбор хранилища данных .......................................................... 340
8.1.2. Исключение преобразования данных .................................... 340
8.1.3. Помещайте логику туда, где она нужнее ............................... 341
8.2. Введение в MongoDB .............................................................................. 342
8.2.1.  Документоориентированное хранилище ............................. 343