Одностраничные приложения

PDF (RU)        pdf (ru)

key                   F8j5LQ6QlEFeBNKsiiEuyPtDs522pNpOHz0D0NoG3wg

Часть 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
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
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
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
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