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

ES Modules вместо AMD: переход в XXI век

Одно из самых значимых изменений — полный переход jQuery на ES Modules (ESM). Если раньше исходный код использовал AMD-модули, что требовало обходных путей при работе с современными сборщиками, то теперь всё просто: jQuery поставляется как полноценный ESM-модуль.

Это означает, что вы можете импортировать jQuery как обычный модуль в Vite, webpack, Rollup и другие инструменты без танцев с бубном. Встроенная поддержка ESM улучшает совместимость с современными build pipeline’ами и упрощает работу с tree-shaking — сборщики теперь лучше понимают, какой код используется, а какой можно отсечь.

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

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

Удаление устаревших API: чистка старого хлама

В jQuery 4.0 удалены десятки методов и функций, которые давно были помечены как deprecated. Это включает jQuery.isArray, jQuery.trim, jQuery.parseJSON, jQuery.type, jQuery.now, jQuery.isNumeric и многие другие.

Почему это хорошо? Потому что в современных браузерах для всех этих операций есть встроенные, более эффективные альтернативы. Например, вместо jQuery.isArray() используешь встроенный Array.isArray(), вместо jQuery.trim() — String.prototype.trim(). Удаление дублирующегося кода сокращает размер библиотеки и делает её быстрее.

Это привело к снижению размера на 3 килобайта (в gzip-архиве), что может показаться несущественным, но когда речь идёт о slim-версии jQuery, каждый килобайт считается. Slim-версия теперь весит 19.5 КБ вместо прежних 22.5 КБ, а полная версия — 27.5 КБ.

Удалены следующие устаревшие API:

• jQuery.isArray - используй Array.isArray()
• jQuery.trim - используй String.prototype.trim()
• jQuery.parseJSON - используй встроенный JSON.parse()
• jQuery.type - определение типа через typeof и instanceof
• jQuery.now - используй Date.now() или performance.now()
• jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow - всё заменяется на встроенные проверки
• jQuery.cssNumber, jQuery.cssProps - более специализованные API, которые имели узкое применение

Поддержка браузеров: окончание эпохи Internet Explorer

jQuery 4.0 официально прекратила поддержку Internet Explorer 10 и более старых версий. IE 11 пока ещё поддерживается, но разработчики уже анонсировали, что в jQuery 5.0 поддержка IE11 будет удалена полностью.

Также упал поддержка Edge Legacy (старые версии Edge до перехода на Chromium), ранних версий iOS Safari и старых браузеров на Android. Это решение логично: эти браузеры крайне редко встречаются в production, а их поддержка требует дополнительного кода и тестирования.

Для вас это значит:

• Более чистый и лёгкий код - не нужны полифилы и workaround’ы для древних браузеров
• Лучшая производительность - условная логика для старых браузеров удалена
• Современные API по умолчанию - jQuery может смело использовать ES6+ функции
• Более быстрые исправления ошибок - разработчикам не нужно держать в голове совместимость с динозаврами

Если ваша статистика показывает, что более 0.5-1% пользователей приходят из IE10 или старше, лучше остаться на jQuery 3.x. Для всех остальных — jQuery 4.0 это просто находка.

Trusted Types и улучшенная безопасность

В jQuery 4.0 добавлена поддержка Trusted Types — стандарта, который помогает защищаться от XSS-атак. Trusted Types предотвращают небезопасное присваивание HTML-контента и работают в паре с жёсткими настройками Content Security Policy (CSP).

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

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

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

Изменения в обработке событий фокуса

Порядок обработки событий focus, blur, focusin и focusout теперь соответствует актуальной спецификации W3C. jQuery перестала переопределять поведение браузера, и события срабатывают в стандартизированном порядке.

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

Критические изменения в обработке событий:

• Новый порядок: blur → focusout → focus → focusin - стандартный порядок W3C
• Нет переопределения браузерного поведения - jQuery использует нативные события
• Возможные баги в валидации - проверь свои маски ввода и обработчики фокуса
• Необходимо тестирование - особенно внимательно на форм и интерактивных элементах

Ajax и JSONP: явность вместо магии

jQuery больше не автоматически превращает JSON в JSONP. Если вам нужен JSONP, нужно явно это указать в параметрах. Это сделано для повышения предсказуемости и безопасности кода.

Также изменилось поведение CSS при работе с числовыми значениями. jQuery больше не подставляет px автоматически — если вы передаёте число в .css(), нужно явно указать единицы измерения. Например, вместо .css('left', 10) нужно писать .css('left', '10px').

Изменения в Ajax и CSS:

• JSONP требует явного указания - параметр dataType: 'jsonp' обязателен
• Нет автоматического добавления px - все единицы нужно указывать явно в CSS
• Меньше неожиданных преобразований - код становится более предсказуемым
• Лучшая совместимость с TypeScript - явные типы упрощают type-checking

Slim-версия: стала ещё легче

Slim-версия jQuery (облегчённая сборка без AJAX, анимаций и других модулей) теперь весит 19.5 КБ и больше не включает Deferreds и Callbacks. Вместо них рекомендуется использовать встроенные Promise.

Это решение отлично для проектов, которым нужны только базовые функции манипуляции DOM. Если ваш сайт не использует jQuery для анимаций, AJAX-запросов или очередей (queue), slim-версия — это ваш выбор.

Плагин jQuery Migrate для упрощения миграции

Для облегчения переезда с jQuery 3.x на jQuery 4.0 рекомендуется использовать jQuery Migrate. Подключите его в dev-версии вашего приложения, откройте консоль браузера и смотрите предупреждения (JQMIGRATE). Они подскажут, что именно в вашем коде требует изменений.

Процесс миграции выглядит примерно так:

1. Обновить jQuery до 4.0.0
2. Подключить jQuery Migrate 4.x в dev-версию
3. Открыть консоль браузера и проверить warnings
4. Изменить код в соответствии с рекомендациями
5. Убрать jQuery Migrate из production

Большинство проектов мигрируют с минимальными изменениями — разработчики предусмотрели плавный переход и старались избежать излишних breaking changes.

Что нужно проверить перед обновлением

Перед тем как обновлять jQuery на production, протестируйте следующее:

• Формы и валидация - проверьте порядок событий focus/blur
• CSS-стили - если задаёте значения числами, добавьте единицы измерения
• AJAX-запросы - убедитесь, что не используете автоматическое преобразование в JSONP
• Анимации и очереди - если используете slim-версию, проверьте, что заменили Deferred на Promise
• Устаревшие методы - замените jQuery.trim(), jQuery.isArray() и прочее на нативные аналоги
• Старые браузеры - если всё ещё поддерживаете IE10 и ниже, останьтесь на jQuery 3.x

О чём думать дальше

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

С другой стороны, jQuery 4.0 показывает, что библиотека адаптируется к современному веб-разработке. Если у вас большой кодовый базис на jQuery и миграция на другие инструменты нецелесообразна, обновление на jQuery 4.0 — это разумный шаг в сторону более чистого, быстрого и безопасного кода.