УДК 004.738.5:004.45jQuery
ББК 32.973.202-018.2
В88
Вуд, Кит.
В88
Расширение библиотеки jQuery / К. Вуд ; пер. с англ. А. Н. Киселёва.
— 2-е изд., эл. — 1 файл pdf : 401 с. — Москва : ДМК Пресс, 2023. —
Систем. требования: Adobe Reader XI либо Adobe Digital Editions 4.5 ;
экран 10". — Текст : электронный.
ISBN 978-5-89818-541-1
jQuery — одна из наиболее популярных библиотек для разработки клиентских
сценариев на JavaScript. В ней предусмотрено большое количество точек интеграции,
посредством которых можно добавлять собственные селекторы и фильтры, расширения,
анимационные эффекты и многое другое. Эта книга покажет вам, как это
делается.
Из книги вы узнаете, как писать расширения и как проектировать их, чтобы максимально
обеспечить возможность их многократного использования. Вы также научитесь
писать новые виджеты и эффекты для jQuery UI. Наряду с этим вы исследуете
особенности создания расширений для применения в таких ключевых аспектах
библиотеки, как технология Ajax, события, анимация и проверка данных.
Издание предназначено для веб-программистов разной квалификации, уже использующих
jQuery в своей работе.
УДК 004.738.5:004.45jQuery
ББК 32.973.202-018.2
Электронное издание на основе печатного издания: Расширение библиотеки jQuery / Вуд К. ; пер. с англ.
А.Н. Киселёв. — Москва : ДМК Пресс, 2014. — 400 c. — ISBN 978-5-97060-071-9. — Текст : непосредственный.
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было
форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
Материал, изложенный в данной книге, многократно проверен. Но поскольку вероятность технических
ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность
приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные
с использованием книги.
В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.
ISBN
978-5-89818-541-1
© 2013 by Manning Publications Co.
© Оформление, перевод, ДМК Пресс, 2014
Стр.5
Содержание
Предисловие..................................................................................................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
Стр.6
6 Содержание
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
Стр.7
Содержание 7
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
Стр.8
8 Содержание
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
Стр.9
Содержание 9
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
Стр.10
10 Содержание
Глава 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
Стр.11
Содержание 11
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
12 Содержание
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
Стр.13
Содержание 13
Приложение А. Регулярные выражения .............................. 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
Стр.14