jQuery 4.0: модули ES и первое обновление за 10 лет

[hannadev]

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

Для многих разработчиков jQuery остаётся важным инструментом, несмотря на популярность фреймворков вроде React и Vue. Обновление затронет способ, как вы импортируете библиотеку, какие API доступны, и как она работает в современных сборщиках. Давайте разберёмся, что изменилось и зачем это нужно.

ES Modules вместо AMD: в ногу со временем

Одно из самых значимых изменений - полный переход jQuery на ES Modules (ESM). Раньше исходный код использовал AMD-модули, что создавало проблемы при работе с современными сборщиками вроде Vite, webpack и Rollup. Приходилось применять обходные пути и дополнительные плагины.

Теперь jQuery поставляется как полноценный ESM-модуль, что означает прямую интеграцию с современными build pipeline’ами без лишних танцев. Вы просто импортируете jQuery стандартным синтаксисом, и сборщик понимает её структуру на лету.

Что это даёт на практике:

• Стандартный синтаксис импорта - вместо require() или AMD используешь import jQuery from 'jquery'
• Лучшая оптимизация через tree-shaking - сборщики видят явную структуру модулей и удаляют неиспользуемый код
• Совместимость с <script type="module" - можешь использовать jQuery прямо в браузерных модулях без обработки
• Прямая работа с Vite и webpack - нет необходимости в дополнительных плагинах

Это особенно полезно для тех, кто работает с современным стеком: куда проще собирать бандл, когда все зависимости говорят на одном языке модулей.

Удаление устаревшего кода и сокращение размера

Вторая сторона модернизации - это избавление от API, которые дублируют встроенные браузерные функции. jQuery удалила методы, которые когда-то были необходимы для кроссбраузерности, но теперь вызывают только путаницу.

Вот что было удалено и почему это имеет смысл. Методы вроде jQuery.isArray(), jQuery.trim(), jQuery.now() и jQuery.parseJSON() имеют прямые аналоги в современном JavaScript. Зачем держать обёртку, если можно использовать Array.isArray(), String.trim() или JSON.parse() напрямую? Это только добавляет кода при загрузке страницы.

Удалены и внутренние компоненты, связанные с CSS и манипуляциями массивов. Из прототипа jQuery убрали недокументированные методы push, sort и splice. Это действительно никто не использовал в production-коде - это были внутренние детали реализации.

Результат измеримый:

• Slim-версия сократилась до 19.5 КБ (вместо 27 КБ раньше)
• Полная версия теперь весит 27.5 КБ
• Экономия на сжатии gzip составила примерно 3 КБ

Для мобильных проектов и критичных по производительности приложений это заметное улучшение. Особенно если учесть, что slim-версия стала ещё меньше благодаря удалению модулей Deferred и Callbacks - теперь она рекомендует использовать нативные Promises.

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

В jQuery 4.0 добавлена поддержка Trusted Types - современного браузерного API для защиты от XSS-атак через DOM-манипуляции. Это критично, когда вы работаете со строгими CSP-политиками (Content Security Policy).

Теперь в методы jQuery можно передавать HTML в форме объектов TrustedHTML. Браузер будет знать, что контент безопасен, и не будет блокировать его при жёсткой CSP. Кроме того, большинство асинхронных загрузок скриптов используют динамически создаваемые <script> элементы вместо встроенных скриптов - это тоже снижает риск.

Что улучшилось в области безопасности:

• Совместимость с жёсткой Content Security Policy - можешь использовать jQuery, не ослабляя CSP-настройки
• Защита от DOM XSS - Trusted Types предотвращают случайное внедрение вредоноса
• Валидация передаваемого контента - jQuery проверяет безопасность HTML перед вставкой
• Стандартизированный порядок событий focus/blur - теперь соответствует спецификации W3C, что исключает неожиданное поведение

Это особенно важно для enterprise-приложений, где безопасность - не опция, а требование.

Изменения браузерной поддержки

jQuery 4.0 прекращает поддержку IE 10 и ниже, а также старых версий Edge Legacy и очень старых мобильных браузеров (старые iOS/Android Browser). IE 11 ещё поддерживается, но это вероятно последняя версия, которая его содержит.

Это логичный шаг - браузеры, которые jQuery больше не поддерживает, давно вышли из общего пользования. Если ваш проект всё ещё должен работать с IE 10, jQuery 4.0 вам не подходит, и нужно остаться на версии 3.x.

Для остального контингента разработчиков это значит:

• Меньше полифилов и обходных путей в коде
• Более чистый и понятный исходник библиотеки
• Быстрее выполняется и меньше весит

Практический чек-лист при обновлении

Если вы решили перейти на jQuery 4.0, разработчики обещают, что большинство проектов обновятся с минимальными изменениями. Вот как это сделать правильно.

Первый шаг - обновить саму jQuery до версии 4.0.0. Но прежде чем менять весь код, подключите jQuery Migrate 4.x в dev-версии. Это специальный плагин, который выдаст предупреждения в консоли JQMIGRATE - покажет, какие устаревшие API вы используете.

Что нужно проверить после обновления:

• CSS и единицы измерения - jQuery больше не добавляет px автоматически, пишите явно: вместо .css('width', 100) используйте .css('width', '100px')
• Ajax-запросы - поведение может измениться, проверьте критичные запросы
• Формы и валидация - порядок событий может отличаться
• Дефолтное поведение - jQuery перестала переопределять некоторые поведения браузера

Для сложных проектов может потребоваться ручное тестирование. Для простых сайтов обновление обычно проходит без проблем.

На чём сосредоточиться дальше

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

Но для проектов, которые уже строятся на jQuery, обновление имеет смысл. Вы получаете более безопасный, легкий и современный инструмент, который лучше интегрируется с текущим экосистемом JavaScript. Остаётся вопрос - нужна ли вам вообще jQuery в новых проектах, или пришла пора переходить на что-то посерьёзнее.