jQuery – одна из наиболее популярных библиотек для разработки клиентских сценариев на JavaScript. В ней предусмотрено большое количество точек интеграции , посредство м которых можно добавлять собственные селекторы и фильтры, расширения , анимационные эффекты и многое другое. Эта книга покажет вам, как это делается. Из книги вы узнаете, как писать расширения и как проектировать их, чтобы максимально обеспечить возможность их многократного использования. Вы также научитесь писать новые виджеты и эффекты
для jQuery UI. Наряду с этим вы исследуете особенности создания расширений для применения в таких ключевых аспектах библиотеки , как технология Ajax, события, анимация и проверка данных. Издание предназначено для веб-программистов разной квалификации, уже использующих jQuery в своей работе.
Содержание
Предисловие ……………………………………………………………………………………..14
Вступление …………………………………………………………………………………………16
Благодарности …………………………………………………………………………………18
Об этой книге …………………………………………………………………………………….19
Об иллюстрации на обложке ……………………………………………………24
Часть I. Простые расширения …………………………………………………25
Глава 1. Расширения для jQuery ……………………………………………26
1.1. История развития jQuery ………………………………………………………………26
1.1.1. Происхождение ………………………………………………………………………27
1.1.2. Развитие …………………………………………………………………………………..28
1.1.3. Современное состояние дел ………………………………………………….31
1.2. Расширение jQuery ………………………………………………………………………….32
1.2.1. Что доступно для расширения? ……………………………………………32
1.3. Примеры расширений …………………………………………………………………….36
1.3.1. jQuery UI …………………………………………………………………………………37
1.3.2. Проверка данных ……………………………………………………………………38
1.3.3. Графический ползунок ………………………………………………………….39
1.3.4. Интеграция со службой Google Map …………………………………..40
1.3.5. Cookies ……………………………………………………………………………………..41
1.3.6. Анимация, основанная на изменении цвета ……………………….42
1.4. В заключение ……………………………………………………………………………………43
Глава 2. Первое расширение …………………………………………………..44
2.1. Архитектура jQuery ………………………………………………………………………..44
2.1.1. Точки интеграции с библиотекой jQuery …………………………..46
2.1.2. Селекторы ……………………………………………………………………………….47
2.1.3. Расширения коллекций …………………………………………………………48
2.1.4. Вспомогательные функции …………………………………………………..49
2.1.5. Виджеты jQuery UI ………………………………………………………………..49
2.1.6. Эффекты jQuery UI ……………………………………………………………….50
2.1.7. Анимация свойств ………………………………………………………………….50
2.1.8. Поддержка Ajax ………………………………………………………………………51
2.1.9. Обработка событий ………………………………………………………………..52
2.1.10. Правила проверки данных ………………………………………………….52
2.2. Простое расширение ……………………………………………………………………….53
2.2.1. Текст подсказки ………………………………………………………………………53
2.2.2. Реализация расширения Watermark …………………………………..54
2.2.3. Удаление текста подсказок ……………………………………………………56
2.2.4. Применение расширения Watermark ………………………………….57
2.3. В заключение ……………………………………………………………………………………60
Глава 3. Селекторы и фильтры ……………………………………………….61
3.1. Что такое селекторы и фильтры?…………………………………………………..62
3.1.1. Зачем добавлять новые селекторы? …………………………………….62
3.1.2. Простые селекторы ………………………………………………………………..63
3.1.3. Селекторы псевдоклассов ……………………………………………………..65
3.2. Добавление нового селектора псевдокласса ………………………………..70
3.2.1. Структура селектора псевдокласса ……………………………………..70
3.2.2. Добавление селектора по точному соответствию
содержимого ……………………………………………………………………………………..72
3.2.3. Добавление селектора по соответствию шаблону ……………..75
3.2.4. Добавление селектора по типу элемента …………………………….77
3.2.5. Добавление селектора элементов с текстом
на иностранном языке ……………………………………………………………………..78
3.2.6. Селекторы из расширения Validation ………………………………….80
3.3. Добавление фильтров множеств ……………………………………………………81
3.3.1. Структура селектора множества ………………………………………….81
3.3.2. Добавление селектора выборки элементов из середины
множества ………………………………………………………………………………………….83
3.3.3. Расширение селектора по индексу ……………………………………..84
3.4. В заключение ……………………………………………………………………………………87
Часть II. Расширения и функции ……………………………………………88
Глава 4. Принципы разработки расширений …………………89
4.1. Архитектура расширений ……………………………………………………………….89
4.1.1. Преимущества оформления расширений в виде
модулей ……………………………………………………………………………………………..90
4.1.2. Проектирование архитектуры………………………………………………91
4.1.3. Поддержка модульной архитектуры в расширениях ………..92
4.2. Руководящие принципы …………………………………………………………………93
4.2.1. Наращивайте возможности прогрессивно ………………………….93
4.2.2. Объявляйте только одно имя и используйте
его повсюду ……………………………………………………………………………………….93
4.2.3. Помещайте все в объект jQuery …………………………………………..95
4.2.4. Не рассчитывайте, что имя $ будет ссылаться
на jQuery ……………………………………………………………………………………………96
4.2.5. Скрывайте тонкости реализации с использованием
областей видимости …………………………………………………………………………96
4.2.6. Используйте методы для доступа к дополнительной
функциональности …………………………………………………………………………..98
4.2.7. Возвращайте объект jQuery,
если это возможно ……………………………………………………………………………98
4.2.8. Используйте функцию data для сохранения данных
экземпляра ………………………………………………………………………………………..99
4.2.9. Предусматривайте возможность настройки …………………… 100
4.2.10. Используйте осмысленные значения по умолчанию ….. 101
4.2.11. Добавьте поддержку локализации …………………………………. 103
4.2.12. Реализуйте оформление внешнего вида с помощью
CSS ………………………………………………………………………………………………….. 104
4.2.13. Тестируйте расширение в основных браузерах ……………. 107
4.2.14. Создавайте комплекты повторимых тестов ………………….. 108
4.2.15. Создавайте демонстрационные примеры
и документацию ……………………………………………………………………………. 108
4.3. В заключение ………………………………………………………………………………… 110
Глава 5. Расширения коллекций ………………………………………… 112
5.1. Что такое расширения коллекций?……………………………………………. 112
5.2. Инфраструктура поддержки расширений ………………………………… 113
5.2.1. Расширение MaxLength ……………………………………………………. 113
5.2.2. Устройство расширения MaxLength ……………………………….. 114
5.3. Определение собственного расширения …………………………………… 117
5.3.1. Выбор имени ……………………………………………………………………….. 117
5.3.2. Инкапсуляция……………………………………………………………………… 118
5.3.3. Использование объекта-одиночки …………………………………… 119
5.4. Применение к элементам …………………………………………………………….. 121
5.4.1. Простое подключение ………………………………………………………… 121
5.4.2. Инициализация расширения…………………………………………….. 122
5.4.3. Вызов методов …………………………………………………………………….. 124
5.4.4. Методы чтения ……………………………………………………………………. 126
5.5. Параметры настройки ………………………………………………………………….. 128
5.5.1. Значения настроек по умолчанию ……………………………………. 129
5.5.2. Локализация ………………………………………………………………………… 130
5.5.3. Реакция на изменение параметров …………………………………… 132
5.5.4. Реализация реакции на изменение параметров
в MaxLength ………………………………………………………………………………….. 135
5.5.5. Активация и деактивация виджета ………………………………….. 136
5.6. Добавление обработчиков событий …………………………………………… 138
5.6.1. Регистрация обработчиков событий ………………………………… 138
5.6.2. Вызов обработчика события ……………………………………………… 139
5.7. Добавление методов …………………………………………………………………….. 140
5.7.1. Получение текущей длины ……………………………………………….. 140
5.8. Удаление расширения ………………………………………………………………….. 141
5.8.1. Метод destroy ……………………………………………………………………… 141
5.9. Заключительные штрихи ……………………………………………………………. 142
5.9.1. Главная цель расширения ………………………………………………….. 142
5.9.2. Реализация поддержки стилей …………………………………………. 145
5.10. Законченное расширение ………………………………………………………….. 146
5.11. В заключение ………………………………………………………………………………. 148
Глава 6. Расширения-функции ……………………………………………. 149
6.1. Определение расширения …………………………………………………………… 150
6.1.1. Расширение для локализации …………………………………………… 150
6.1.2. Код инфраструктуры ………………………………………………………….. 152
6.1.3. Загрузка локализаций ………………………………………………………… 152
6.2. Расширение Cookie ………………………………………………………………………. 156
6.2.1. Операции с данными cookie ………………………………………………. 157
6.2.2. Чтение и запись cookies ……………………………………………………… 158
6.3. В заключение ………………………………………………………………………………… 161
Глава 7. Тестирование, упаковка
и документирование расширений ……………………………………. 162
7.1. Тестирование расширений ………………………………………………………….. 163
7.1.1. Что тестировать?…………………………………………………………………. 164
7.1.2. Использование QUnit ………………………………………………………… 165
7.1.3. Тестирование расширения MaxLength ……………………………. 167
7.1.4. Тестирование установки и извлечения параметров
расширения ……………………………………………………………………………………. 170
7.1.5. Имитация действий пользователя……………………………………. 172
7.1.6. Тестирование функций-обработчиков …………………………….. 174
7.2. Упаковка расширений ………………………………………………………………….. 176
7.2.1. Сборка всех файлов вместе ……………………………………………….. 176
7.2.2. Минификация расширения ………………………………………………. 178
7.2.3. Реализация простого примера ………………………………………….. 181
7.3. Документирование расширений ………………………………………………… 184
7.3.1. Документирование параметров настройки …………………….. 184
7.3.2. Документирование методов и вспомогательных
функций …………………………………………………………………………………………. 185
7.3.3. Демонстрация возможностей расширения ……………………… 186
7.4. В заключение ………………………………………………………………………………… 188
Часть III. Расширение jQuery UI ………………………………………….. 190
Глава 8. Виджеты jQuery UI ……………………………………………………. 191
8.1. Инфраструктура поддержки виджетов …………………………………….. 192
8.1.1. Модули jQuery UI ………………………………………………………………. 192
8.1.2. Модуль Widget ……………………………………………………………………. 194
8.1.3. Расширение MaxLength ……………………………………………………. 196
8.1.4. Устройство расширения MaxLength ………………………………… 197
8.2. Определение виджета ………………………………………………………………….. 198
8.2.1. Выбор имени ……………………………………………………………………….. 199
8.2.2. Инкапсуляция виджета ……………………………………………………… 199
8.2.3. Объявление виджета ………………………………………………………….. 200
8.3. Применение к элементам …………………………………………………………….. 202
8.3.1. Простое подключение и инициализация ………………………… 202
8.4. Параметры настройки ………………………………………………………………….. 204
8.4.1. Значения настроек по умолчанию ……………………………………. 205
8.4.2. Реакция на изменение параметров …………………………………… 206
8.4.3. Реализация параметров настройки MaxLength ……………… 208
8.4.4. Активация и деактивация виджета ………………………………….. 212
8.5. Добавление обработчиков событий …………………………………………… 213
8.5.1. Регистрация обработчиков событий ………………………………… 213
8.5.2. Вызов обработчиков событий …………………………………………… 215
8.6. Добавление методов …………………………………………………………………….. 216
8.6.1. Получение текущей длины ……………………………………………….. 217
8.7. Удаление виджета …………………………………………………………………………. 218
8.7.1. Метод _destroy…………………………………………………………………….. 218
8.8. Заключительные штрихи ……………………………………………………………. 220
8.8.1. Главная цель расширения ………………………………………………….. 220
8.8.2. Реализация поддержки стилей …………………………………………. 222
8.9. Законченное расширение ……………………………………………………………. 224
8.10. В заключение ………………………………………………………………………………. 226
Глава 9. Взаимодействия с мышью в jQuery UI …………. 228
9.1. Модуль jQuery UI Mouse …………………………………………………………….. 229
9.1.1. Операции буксировки мышью ………………………………………….. 229
9.1.2. Параметры настройки, поддерживаемые модулем
Mouse ……………………………………………………………………………………………… 229
9.2. Определение виджета ………………………………………………………………….. 231
9.2.1. Функциональность виджета Signature ……………………………. 231
9.2.2. Устройство расширения Signature ……………………………………. 233
9.2.3. Объявление виджета ………………………………………………………….. 235
9.3. Применение расширения к элементу ………………………………………… 236
9.3.1. Инициализация, выполняемая инфраструктурой …………. 236
9.3.2. Собственная инициализация …………………………………………… 237
9.4. Параметры настройки ………………………………………………………………….. 239
9.4.1. Значения настроек по умолчанию ……………………………………. 240
9.4.2. Установка параметров ………………………………………………………… 241
9.4.3. Реализация параметров настройки Signature …………………. 242
9.4.4. Активация и деактивация виджета ………………………………….. 244
9.5. Добавление обработчиков событий …………………………………………… 244
9.5.1. Регистрация обработчиков событий ………………………………… 245
9.5.2. Вызов обработчиков событий …………………………………………… 246
9.6. Взаимодействие с мышью …………………………………………………………… 246
9.6.1. Можно ли начать буксировку? …………………………………………. 247
9.6.2. Начало буксировки …………………………………………………………….. 248
9.6.3. Слежение за положением указателя в процессе
буксировки …………………………………………………………………………………….. 249
9.6.4. Завершение буксировки …………………………………………………….. 250
9.7. Добавление методов …………………………………………………………………….. 250
9.7.1. Очистка подписи ………………………………………………………………… 251
9.7.2. Преобразование в формат JSON ………………………………………. 252
9.7.3. Повторное отображение подписи …………………………………….. 253
9.7.4. Проверка наличия подписи ………………………………………………. 254
9.8. Удаление виджета …………………………………………………………………………. 255
9.8.1. Метод _destroy…………………………………………………………………….. 256
9.9. Законченное расширение ……………………………………………………………. 257
9.10. В заключение ………………………………………………………………………………. 258
Глава 10. Эффекты jQuery UI ………………………………………………… 259
10.1. Инфраструктура поддержки эффектов в jQuery UI ……………… 260
10.1.1. Модуль Effects ………………………………………………………………….. 260
10.1.2. Общие функции эффектов ……………………………………………… 262
10.1.3. Существующие эффекты …………………………………………………. 265
10.2. Добавление нового эффекта ……………………………………………………… 267
10.2.1. Эффект сжатия………………………………………………………………….. 267
10.2.2. Инициализация эффекта …………………………………………………. 269
10.2.3. Реализация эффекта …………………………………………………………. 271
10.2.4. Реализация эффекта в версиях jQuery UI ниже 1.9 …….. 273
10.2.5. Законченный эффект ……………………………………………………….. 274
10.3. Функции управления переходами …………………………………………… 275
10.3.1. Что такое «функция управления переходом»?…………….. 275
10.3.2. Существующие функции управления переходами ……… 277
10.3.3. Добавление новой функции управления переходом …… 279
10.4. В заключение ………………………………………………………………………………. 282
Часть IV. Прочие расширения ……………………………………………… 284
Глава 11. Анимация свойств …………………………………………………. 285
11.1. Инфраструктура поддержки анимационных эффектов ……….. 286
11.1.1. Механизм анимации …………………………………………………………. 287
11.1.2. Порядок выполнения анимации …………………………………….. 289
11.2. Добавление собственного обработчика анимации
свойства ………………………………………………………………………………………….. 292
11.2.1. Анимация свойства background-position……………………….. 293
11.2.2. Объявление обработчика и извлечение значения
свойства ………………………………………………………………………………………….. 294
11.2.3. Изменение значения свойства ………………………………………… 297
11.2.4. Анимация свойства background-position в jQuery 1.7 …. 299
11.2.5. Законченное расширение ………………………………………………… 301
11.3. В заключение ………………………………………………………………………………. 301
Глава 12. Расширение поддержки Ajax ………………………….. 303
12.1. Инфраструктура поддержки Ajax ……………………………………………. 304
12.1.1. Предварительные фильтры ……………………………………………… 305
12.1.2. Транспорт …………………………………………………………………………… 306
12.1.3. Преобразователи ……………………………………………………………… 307
12.2. Добавление предварительного фильтра ………………………………….. 308
12.2.1. Изменение типа данных …………………………………………………… 308
12.2.2. Отмена запроса Ajax ………………………………………………………… 309
12.3. Добавление транспорта Ajax …………………………………………………….. 310
12.3.1. Загрузка изображений ……………………………………………………… 311
12.3.2. Имитация загрузки HTML для нужд тестирования …… 314
12.4. Добавление преобразователя Ajax …………………………………………… 318
12.4.1. Формат CSV ………………………………………………………………………. 318
12.4.2. Преобразование текста в формат CSV ………………………….. 319
12.4.3. Преобразование данных CSV в таблицу ……………………….. 324
12.5. Расширения Ajax ……………………………………………………………………….. 325
12.6. В заключение ………………………………………………………………………………. 326
Глава 13. Расширение поддержки событий ……………….. 328
13.1. Инфраструктура поддержки специализированных
событий ………………………………………………………………………………………….. 329
13.1.1. Подключение обработчиков событий ……………………………. 330
13.1.2. Возбуждение событий ……………………………………………………… 331
13.2. Добавление специализированного события …………………………… 332
13.2.1. Добавление события щелчка правой кнопкой мыши ….. 333
13.2.2. Запрет передачи события щелчка правой кнопкой
мыши ………………………………………………………………………………………………. 336
13.2.3. Событие многократных щелчков правой кнопкой ………. 337
13.2.4. Функции для взаимодействия с событиями ………………… 342
13.3. Расширение существующих событий ……………………………………… 343
13.3.1. Добавление поддержки правой кнопки в событие
click ………………………………………………………………………………………………… 344
13.4. Другие функциональные возможности событий…………………… 346
13.4.1. Реакция по умолчанию на события ……………………………….. 346
13.4.2. Функции обратного вызова preDispatch
и postDispatch ……………………………………………………………………………….. 347
13.4.3. Предотвращение всплытия события ……………………………… 348
13.4.4. Автоматическое связывание и делегирование ……………… 349
13.5. В заключение ………………………………………………………………………………. 351
Глава 14. Создание правил проверки …………………………….. 352
14.1. Расширение Validation ……………………………………………………………… 353
14.1.1. Назначение правил проверки …………………………………………. 354
14.2. Добавление новых правил проверки ……………………………………….. 356
14.2.1. Добавление правила проверки соответствия
шаблону ………………………………………………………………………………………….. 357
14.2.2. Генерирование правил сопоставления с шаблоном ……… 360
14.3. Добавление правила для проверки нескольких полей …………. 363
14.3.1. Группировка полей …………………………………………………………… 363
14.3.2. Определение правила для группы полей ………………………. 364
14.4. В заключение ………………………………………………………………………………. 367
Приложение А. Регулярные выражения ………………………… 369
A.1. Основы регулярных выражений ……………………………………………….. 370
A.2. Синтаксис регулярных выражений ………………………………………….. 371
A.3. Функции объекта RegExp…………………………………………………………… 375
A.4. Функции объекта String …………………………………………………………….. 376
A.5. Приемы применения …………………………………………………………………… 377
A.5.1. Проверка данных ……………………………………………………………….. 377
A.5.2. Извлечение информации ………………………………………………….. 378
A.5.3. Обработка нескольких совпадений …………………………………. 378
A.6. В заключение………………………………………………………………………………… 379
Глоссарий ………………………………………………………………………………………… 380
Алфавитный указатель ……………………………………………………………. 389
Купить книгу