Расширение библиотеки jQuery

Кит Вуд

Расширение 
библиотеки jQuery

Foreword by Dave Methvin

Extending jQuery

Keith Wood

C предисловием Дэйва Метвина

Расширение 
библиотеки jQuery

Москва, 2023

Кит Вуд

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

УДК 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

Содержание

Предисловие..................................................................................................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

Содержание  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

 Содержание

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

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