УДК 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
Стр.5
Содержание
Предисловие ........................................................................................ 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
Содержание 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
Стр.8
8 Содержание
Глава 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
Содержание 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
Стр.10
10 Содержание
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
Стр.11
Содержание 11
8.2.2. Динамическая структура документа ....................................... 343
8.2.3. Начало работы с MongoDB ........................................................ 345
8.3. Драйвер MongoDB ................................................................................... 347
8.3.1. Подготовка файлов проекта ....................................................... 347
8.3.2. Установка и подключение MongoDB ..................................... 348
8.3.3. Использование методов CRUD в MongoDB ....................... 350
8.3.4. Добавление операций CRUD в серверное приложение...... 353
8.4. Валидация данных, поступивших от клиента ................................ 357
8.4.1. Проверка типа объекта ................................................................ 357
8.4.2. Проверка объекта........................................................................... 360
8.5. Создание отдельного модуля CRUD ................................................. 368
8.5.1. Подготовка структуры файлов ................................................. 369
8.5.2. Перенос операций CRUD в отдельный модуль .................. 372
8.6. Реализация модуля chat ......................................................................... 378
8.6.1. Начало модуля Chat ..................................................................... 379
8.6.2. Создание обработчика сообщения adduser ........................... 382
8.6.3. Создание обработчика сообщения updatechat .................... 386
8.6.4. Создание обработчиков отключения ...................................... 388
8.6.5. Создание обработчика сообщения updateavatar ................. 390
8.7. Резюме .......................................................................................................... 393
Глава 9. Подготовка SPA к промышленной
эксплуатации .............................................................................................. 395
9.1. Поисковая оптимизация SPA ............................................................... 396
9.1.1. Как Google индексирует SPA ..................................................... 396
9.2. Облачные и сторонние службы ........................................................... 400
9.2.1. Анализ работы сайта ..................................................................... 400
9.2.2. Протоколирование ошибок на стороне клиента ................. 403
9.2.3. Сети доставки содержимого ...................................................... 406
9.3. Кэширование и отключение кэширования ..................................... 406
9.3.1. Варианты кэширования .............................................................. 407
9.3.2. Веб-хранилище ............................................................................... 408
9.3.3. HTTP-кэширование ..................................................................... 410
9.3.4. Кэширование на сервере ............................................................. 414
9.3.5. Кэширование запросов к базе данных .................................... 420
9.4. Резюме .......................................................................................................... 421
Приложение А. Стандарт кодирования
на JavaScript ................................................................................................ 424
А.1. Зачем нам стандарт кодирования? .................................................... 424
Стр.12
12 Содержание
A.2. Форматирование кода и комментарии ............................................ 425
A.2.1. Форматирование кода с учетом удобства чтения .............. 426
A.2.2. Комментарии как средство пояснения
и документирования ................................................................................ 434
A.3. Именование переменных ...................................................................... 437
A.3.1. Сокращение и повышение качества комментариев
за счет соглашений об именовании .................................................... 437
A.3.2. Рекомендации по именованию................................................. 439
A.3.3. Практическое применение рекомендаций ........................... 447
A.4. Объявление и присваивание переменным...................................... 448
A.5. Функции ..................................................................................................... 450
A.6. Пространства имен.................................................................................. 453
A.7. Имена и структура дерева файлов ..................................................... 454
A.8. Синтаксис ................................................................................................... 455
A.8.1. Метки ................................................................................................ 456
A.8.2. Предложения .................................................................................. 456
A.8.3. Прочие замечания о синтаксисе .............................................. 459
A.9. Валидация кода ........................................................................................ 460
A.9.1. Установка JSLint ........................................................................... 460
A.9.2. Настройка JSLint .......................................................................... 461
A.9.3. Использование JSLint ................................................................. 462
A.10. Шаблон модуля ...................................................................................... 463
A.11. Резюме ....................................................................................................... 465
Приложение Б. Тестирование SPA ........................................... 467
Б.1. Режимы тестирования ........................................................................... 468
Б.2. Выбор каркаса тестирования ............................................................... 472
Б.3. Настройка nodeunit ................................................................................. 473
Б.4. Создание комплекта тестов .................................................................. 474
Б.4.1. Инструктируем Node.js загрузить наши модули ............... 475
Б.4.2. Подготовка одного теста в nodeunit ....................................... 478
Б.4.3. Создание первого настоящего теста ....................................... 479
Б.4.4. План событий и тестов ................................................................ 480
Б.4.5. Создание комплекта тестов ....................................................... 483
Б.5. Адаптация модулей SPA для тестирования .................................... 496
Б.6. Резюме ......................................................................................................... 499
Предметный указатель ...................................................................... 501
Стр.13