jQuery 4.0: ES Modules и отказ от legacy в современной веб-разработке

hannadev

jQuery 4.0 вышел после почти десяти лет ожидания. Эта версия фокусируется на ES Modules и убирает устаревший код, делая библиотеку легче и быстрее. Разработчики получат совместимость с современными bundler’ами вроде Vite и Webpack.

Переход помогает сократить размер бандла и ускорить загрузку страниц. Старый код на AMD уходит в прошлое, а нативные Promises заменяют Deferred. Это решает проблемы с CSP и упрощает миграцию на модульные workflows.

ES Modules: новый стандарт импорта

jQuery 4.0 переписан на ES Modules вместо AMD. Теперь можно импортировать библиотеку напрямую: import $ from 'jquery'. Это работает в современных bundler’ах и через <script type="module">. Переход с RequireJS на Rollup сделал сборку эффективнее, с поддержкой tree-shaking.

Раньше прямой импорт требовал AMD-loader’ов, что тормозило интеграцию с Vite или Webpack 5. Добавлен exports в package.json для разных окружений. Тесты теперь запускаются отдельно на ESM, ловя модульные баги. Такой подход aligns jQuery с vanilla JS и SSR-фреймворками.

Прямая совместимость: Vite, Rollup, Webpack 5 обрабатывают jQuery как стандартный модуль.
Tree-shaking: Удаляются неиспользуемые части, снижая размер бандла на тысячи байт.
Глобальный fallback: Основной файл остается UMD для legacy-кода.
Поддержка <script type="module"> без bundler’а в браузере.

Старый способ (AMD)	Новый способ (ES Modules)
`require(['jquery'], ...)`	`import $ from 'jquery'`
RequireJS обязателен	Работает с Rollup/Vite
Нет tree-shaking	Полная оптимизация
Проблемы с CSP	Нативная поддержка

Отказ от legacy: что удалили и зачем

В jQuery 4.0 убрали deprecated API вроде jQuery.isArray, parseJSON, trim и now. Браузеры давно имеют нативные аналоги: Array.isArray(), JSON.parse(), String.prototype.trim(), Date.now(). Это сэкономило بیش 3000 байт в gzipped-версии.

Slim-билд стал 19.5KB, исключив Deferred, Callbacks и Queue. Нативные Promises покрывают большинство случаев, кроме IE11. Ajax-изменения: нет авто-JSONP, скрипты не выполняются без dataType: "script", все async-запросы через script-теги. Это фиксит CSP-violations.

Удаленные утилиты:
- jQuery.isArray → Array.isArray()
- jQuery.trim → str.trim()
Event order: blur → focusout → focus → focusin по W3C.
Trusted Types: Поддержка для манипуляций HTML, безопасно для CSP.
Убраны internal методы вроде push, sort на прототипах.

Функция	Замена	Экономия
Deferred	native Promise	12KB в slim
parseJSON	JSON.parse()	3KB+
AMD source	ES Modules	Совместимость

Ключевые breaking changes и миграция

Ajax-изменения ломают старый код: JSON не промоутится в JSONP, скрипты требуют явного dataType. Script-теги для всех async, избегая CSP-блоков. Attributes: убрали toggleClass(Boolean) сигнатуру. Core: slim без callbacks/deferred.

Event.special больше не наследует Object.prototype, фиксит прототипные pollution. Manipulation: Trusted Types и DOMParser вместо implementation. Selector: backport логики контекста. Для legacy-плагинов expose глобально: window.jQuery = $.

Шаги миграции:
1. Проверьте deprecated API в upgrade guide.
2. Замените Deferred на async/await.
3. Тестируйте Ajax на CSP.
Focus events: Используйте focusin/focusout для timing.
Обновите bundler до Webpack 5+.

Проблема	Решение
AMD loaders	Перейти на ESM
Deferred	Promise + polyfill для IE
CSP blocks	Script tags everywhere
Bundle size	Slim build 19.5KB

jQuery 4.0 в реальных проектах

Библиотека ускорила дашборды: виджет-дерево грузится за 500мс. Модалки с AI-генерацией контента стали легче. Preview AI-видео с slim-билдом сэкономил 12KB. Совместимость с modern workflows упрощает SaaS-разработку.

Нативная Promise-интеграция идеальна для async/await в маркетинговых агентах. Event-order по W3C фиксит кросс-браузерные quirks. Array.flat() где поддерживается, ускоряет обработку. Осталось протестировать edge-кейсы с Trusted Types и подумать о полифиллах для редких сценариев.