jQuery 4.0: ES Modules и конец устаревшего кода

hannadev

После десяти лет ожидания вышла jQuery 4.0 - крупное обновление, которое модернизирует библиотеку и избавляет её от багажа прошлого. Это не просто патч, а серьёзный шаг в развитии самой популярной JavaScript-библиотеки, который коснётся огромного количества проектов.

Обновление принесло кардинальные изменения: миграцию на ES-модули, внедрение Trusted Types для безопасности, удаление устаревших API и множество других улучшений. Разработчикам предстоит разобраться, как эти изменения повлияют на их код и когда стоит переходить на новую версию.

Миграция на ES-модули: конец эпохи AMD

Основное изменение jQuery 4.0 - это переход исходного кода с модулей AMD на ES-модули (ECMAScript Module, ESM). Это не просто техническая мелочь, а фундаментальная переделка архитектуры библиотеки.

Раньше jQuery использовала AMD-модули и RequireJS для управления зависимостями. Исходный код публиковался вместе с релизами на npm и GitHub, но его нельзя было импортировать напрямую как модули без специального инструмента. Теперь всё изменилось. jQuery переведена на Rollup для упаковки, что даёт прямую совместимость с современными инструментами сборки и браузерами через стандартный <script type="module">. Разработчики могут импортировать модули jQuery без дополнительных зависимостей.

Чем это полезно:

Нативная совместимость с современными бандлерами (Webpack, Vite, Rollup)
Возможность использовать import и export напрямую, как в обычном коде
Меньше необходимость в RequireJS и других инструментах управления зависимостями
Прямая работа с <script type="module"> в браузерах
Упрощение процесса интеграции jQuery в новые проекты

Удаление устаревших функций и Array-методов

Вместе с модернизацией архитектуры jQuery 4.0 избавляется от старого кода, который более не нужен в современной веб-разработке. Команда разработчиков провела масштабную уборку.

Основное изменение в этой области - удаление недокументированных методов Array из прототипа jQuery: push, sort и splice. Раньше jQuery-объекты позволяли использовать эти методы, как если бы это были обычные массивы. Теперь при попытке вызвать .push() напрямую на jQuery-объекте код сломается. Вместо $elems.push(elem) нужно писать [].push.call($elems, elem).

Это может показаться мелочью, но влияет на плагины jQuery, которые полагались на такое поведение. Если у вас есть старые плагины, которые используют эти методы, они потребуют обновления или вы останетесь на jQuery 3.x.

Ещё удалено:

Поддержка браузеров раньше IE11 (IE11 ещё работает, но Edge Legacy и очень старые мобильные браузеры удалены)
Объекты Deferred и Callbacks из slim-сборки (используйте нативные Promise вместо них)
Различные внутренние недокументированные параметры
Методы, объявленные устаревшими в предыдущих версиях

CSS и автоматическое добавление единиц

Ещё одно важное изменение касается работы с CSS. jQuery 4.0 перестаёт автоматически добавлять единицы (px) к числовым значениям почти везде, где это раньше происходило.

Это может выглядеть как мелкая деталь, но это очень практичное изменение. Раньше код вроде .css("left", 10) автоматически превращался в left: 10px. Это была “магия”, которая казалась удобной, но на деле приводила к неожиданному поведению, когда нужны были другие единицы - em, rem, %, vh и так далее.

Теперь нужно быть явным: .css("left", "10px") или .css("left", 10 + "px"). Код становится понятнее, и меньше неожиданных багов с размерами элементов. Это также улучшает предсказуемость поведения и соответствует логике нативного JavaScript.

Что изменилось:

Числа без единиц теперь не преобразуются автоматически
Нужно явно указывать единицы: "10px", "5em", "100%"
Правило распространяется на большинство CSS-свойств
Исключения есть для некоторых свойств вроде z-index или opacity

Безопасность: Trusted Types и CSP

jQuery 4.0 вводит поддержку Trusted Types - API для защиты от DOM-основанного cross-site scripting (DOM XSS). Это важно, потому что XSS-атаки остаются одной из самых распространённых уязвимостей веб-приложений.

Trusted Types усложняет жизнь злоумышленникам, которые пытаются внедрить вредоносный код через некорректную обработку пользовательских данных. jQuery теперь может принимать HTML-код в виде объектов TrustedHTML, а при работе с асинхронными скриптами использует внешние теги <script> вместо встроенных скриптов.

Вместе с этим улучшена совместимость с жёсткими Content Security Policy (CSP) настройками. Это особенно важно для высокозащищённых приложений, где нельзя использовать inline-скрипты и styles.

Как это помогает:

Защита от DOM XSS-атак через неправильную обработку данных
Совместимость с CSP политиками уровня 3
Использование TrustedHTML при манипулировании DOM
Асинхронная загрузка скриптов через внешние теги вместо eval
Возможность работать в очень защищённых окружениях

Изменения в AJAX и JSONP

вcJQuery 4.0 автоматическое продвижение JSON-запросов в JSONP было полностью удалено. Раньше если jQuery получала JSON с необычным методом, она могла автоматически переключиться на JSONP. Теперь этого не происходит.

Это означает, что JSONP будет использоваться только при явном указании. Вместо этого jQuery рекомендует использовать CORS для кросс-доменного взаимодействия - это более современный, безопасный и предсказуемый подход.

Одновременно jQuery получила поддержку FormData в AJAX-запросах. Теперь двоичные данные обрабатываются автоматически без необходимости вручную отключать преобразование типов. Это упрощает работу с файлами, изображениями и другими бинарными данными в современных веб-приложениях.

Ключевые изменения AJAX:

JSON больше не преобразуется автоматически в JSONP
JSONP используется только при явном указании
Встроена поддержка объекта FormData
Двоичные данные обрабатываются корректно
Рекомендуется использовать CORS вместо JSONP

Порядок событий фокуса

jQuery 4.0 приносит изменения и в порядок срабатывания событий фокуса (focus, blur, focusin, focusout). Теперь они следуют W3C-спецификации: blur, focusout, focus, focusin. Раньше порядок мог быть другим.

Это может повлиять на код, который полагается на определённый порядок срабатывания этих событий. Если у вас есть валидация форм, обработчики горячих клавиш или другая логика, привязанная к событиям фокуса, стоит внимательно её проверить при обновлении.

Slim-сборка стала ещё меньше

Slim-версия jQuery (без AJAX и effects) сократилась до 19.5 KB. Это стало возможным благодаря удалению объектов Deferred и Callbacks, которые больше не входят в slim-сборку.

Если ваш проект использует очереди (queue), анимации или старый стиль работы с Promise через Deferred, нужно либо перейти на полную сборку jQuery, либо использовать нативные Promise.

Как подготовить свой код к обновлению

Переход на jQuery 4.0 не обязателен немедленно, но лучше подготовиться заранее. Команда jQuery предоставляет специальный плагин миграции для облегчения процесса.

Порядок действий:

Установите migrate-плагин и запустите тесты - он подскажет, что сломается
Обновите свой код: замените числовые CSS-значения на явные единицы
Проверьте критичные зоны: формы, валидация, AJAX, старые плагины
Убедитесь, что плагины совместимы с jQuery 4.0
Удалите migrate и проведите финальную регрессию

Для большинства проектов переход будет безболезненным. Но если у вас много legacy-кода, старых плагинов или сложная архитектура, стоит взять время на тестирование.

На что обратить внимание при миграции

Основные точки, которые нужно проверить при обновлении:

CSS-задания чисел без единиц (.css("left", 10) -> .css("left", "10px"))
Использование Array-методов на jQuery-объектах (push, sort, splice)
AJAX-запросы, которые полагались на автоматическое превращение JSON в JSONP
События фокуса и их порядок срабатывания
Плагины, которые используют удалённые API или недокументированные методы
Slim-сборка, если вам нужны Deferred или Callbacks

Кстати, jQuery 3.x будет получать поддержку дольше, чем 4.0. Это значит, что торопиться не обязательно, если у вас есть сомнения - можно оставить текущую версию на время.

Чего ещё ждать от jQuery

jQuery 4.0 показывает, что библиотека продолжает развиваться и модернизироваться. Отказ от AMD в пользу ES-модулей, добавление Trusted Types, удаление легаси-кода - всё это указывает на то, что jQuery готовится к следующему десятилетию веб-разработки.

Одновременно выход jQuery 4.0 подтверждает, что библиотека остаётся актуальной. Несмотря на появление фреймворков типа React, Vue и Angular, jQuery по-прежнему используется в миллионах проектов. Её обновления показывают стремление соответствовать современным стандартам и практикам веб-разработки, а не просто почивать на лаврах.

Стоит следить за изменениями в экосистеме jQuery и постепенно адаптировать свой код. Не нужно спешить с обновлением, но и откладывать в долгий ящик не стоит.