Недавно вышла новая версия фреймворка jQuery — обещают, что всё стало современнее, производительнее и безопаснее. Несмотря на то что многие разработчики говорят, что всё уже можно делать без jQuery, в 2022 году этот фреймворк использовался более чем в 80 миллионах сайтов. Предыдущий крупный релиз, jQuery 3.0 final, вышел в июне 2016 года, и вот почти 8 лет спустя — новая версия, правда, пока бета.
Рассказываем, что за это время сделали разработчики и как это всё повлияет на веб.
jQuery — специальная библиотека, написанная на JavaScript, в которой многие типовые действия прописаны как одна команда. Представьте, что это набор готовых деталей конструктора, из которого собрать программу получается быстрее. Правда, не все задачи решаются деталями конструктора…
Попрощались с IE<11 и другими устаревшими браузерами
В новой версии прекратили поддержку Internet Explorer (IE) 10 и ниже. Разработчики планируют поэтапно убирать поддержку IE, но полностью откажутся от неё только в версии 5.0.
Также прекращена поддержка Edge Legacy (не на движке Chromium), iOS до 11, Firefox старше 65-й версии и другие.
При этом, если вам нужно в своём проекте поддерживать старые браузеры, просто используйте старую версию jQuery. С ней всё будет работать стабильно и хорошо, но новых команд и возможностей в ней не будет.
Удалили устаревшие API
Наконец-то удалили устаревшие API, которые либо предназначались только для внутреннего использования, либо уже имеют эквиваленты во всех поддерживаемых браузерах. Теперь их можно использовать, не полагаясь на jQuery. Давно пора.
Например, удалили метод jQuery.isArray, у которого была такая история: изначально в JavaScript не было надёжного и кросс-браузерного способа проверки объекта на принадлежность к типу массива. Для этого часто использовался метод instanceof Array. И jQuery предоставил для этого удобный метод jQuery.isArray().
Но в ECMAScript 5 появился свой нативный метод Array.isArray(). И сейчас необходимость в jQuery.isArray отпала.
Полный список того, что удалили, можно посмотреть в блоге разработчиков:
Убрали методы массивов: push, sort и splice
Методы массивов push, sort и splice в прототипе jQuery всегда вели себя не так, как остальные методы jQuery, и предназначались лишь для внутреннего использования. Это часто раздражало программистов и приводило к разным скрытым ошибкам. Разработчики перенесли эти методы из прототипа jQuery в функции массивов. Например, $elems.push( elem ) превратился в [].push.call( $elems, elem ).
Экосистема jQuery огромна, и такое изменение может повлиять на плагины, полагающиеся на эти методы, поэтому, если у вас есть старые проекты, где много jQuery, лучше использовать старую версию.
Сделали стандартный порядок событий фокуса
Событие фокуса — это когда элемент становится активным для взаимодействия с пользователем. Раньше у jQuery был свой порядок следования событий focus и blur (включая focusin, focusout, focus, blur):
focusoutblurfocusinfocus
Теперь же порядок в jQuery соответствует спецификации W3C (кроме Internet Explorer, который всё равно уже перестаёт поддерживаться):
blurfocusoutfocusfocusin
Это важно, поскольку такое изменение обеспечивает единообразие для всех браузеров.
Добавили поддержку FormData в jQuery.ajax
Создатели фреймворка включили поддержку двоичных данных, в том числе объекта JS FormData в AJAX-запросах. Это упрощает обработку двоичных данных и соответствует современным практикам веб-разработки.
Раньше двоичные данные использовались не так часто и обычно преобразовывались в строку. Чтобы исправить такое поведение, нужно было отключать преобразование данных и обрабатывать данные вручную. Теперь это происходит автоматически.
Удалили автоматическое продвижение запросов JSONP
JSONP — это метод, который используется в JS-скриптах для запроса данных из сервера в другом домене.
Раньше, когда указывали dataType: "jsonp" в методе jQuery.ajax и передавали параметр jsonp: "callback", то jQuery преобразовывал запрос в формате JSONP. Проблема в том, что JSONP создаёт уязвимости — например, позволяет проводить атаки на основе кода (JSONP Injection).
Теперь библиотека придерживается современной практики Cross-Origin Resource Sharing (CORS) для междоменных взаимодействий. Такой подход приводит jQuery в соответствие с современными стандартами веб-безопасности.
Исходный код jQuery мигрирует в ES-модули
ECMAScript-модули (ES-модули) — формат для упаковки JS-кода и его переиспользования. При работе с ними используются инструкции import и export. Миграция jQuery на ES-модули — это большой шаг к тому, чтобы ES-модули стали повсеместным стандартом.
Исходный код jQuery всегда публиковался вместе с выпусками jQuery на npm и GitHub, но его нельзя было импортировать напрямую в виде модулей без RequireJS — библиотеки управления зависимостями JS. Теперь разработчики могут напрямую импортировать модули jQuery без RequireJS, что упрощает внедрение jQuery в различные проекты.
Настроили поддержку Trusted Types и CSP
Trusted Types — это стандарт защиты кода веб-приложений от XSS-атак. Теперь и в jQuery есть поддержка Trusted Types, что улучшает безопасность при манипулировании HTML. Библиотека обрабатывает асинхронные запросы скриптов, используя теги <script>, что уменьшает вероятность ошибок в политике безопасности содержимого (CSP).
Как установить или обновить
В новой версии jQuery много критических изменений, и, чтобы обновление до новой версии ничего не сломало, разработчики обещают, что переход с версии jQuery 3.0+ на версию 4.0.0 будет плавным.
Чтобы устранить проблемы совместимости и обеспечить плавный переход на последнюю версию, можно воспользоваться плагином jQuery Migrate.
Файлы jQuery доступны из CDN, либо на них можно ссылаться напрямую в своих проектах:
https://code.jquery.com/jquery-4.0.0-beta.js
https://code.jquery.com/jquery-4.0.0-beta.min.js
Также jQuery можно установить через npm:
npm install jquery@4.0.0-beta
