9 июня 2016 года состоялся официальный релиз jQuery 3.0, которая была в разработке с октября 2014 года. Целью было создание более легкой и быстрой версии jQuery (конечно, с обратной совместимостью). Удалили все старые костыли для IE и использовали некоторое более современное веб API там, где это необходимо. jQuery 3.0 является продолжением ветки 2.x, но с некоторыми изменениями, которые давно хотели внести. Такие ветки как 1.12 и 2.2 будут получать критические патчи в течение некоторого времени, но ожидать новый функционал в них не стоит. jQuery 3.0 — это будущее jQuery. Если вдруг Вам нужна поддержка IE 6-8, Вы можете продолжать использовать релиз версии 1.12.
Ожидается, что апгрейд Ваших проектов до версии 3.0 не доставит много хлопот. Да, есть несколько критических изменений, оправдавших главную фишку версии, и есть надежда, что это не сильно повлияет на процесс обновления.
Для помощи в апгрейде добавили новое руководство по обновлению до версии 3.0, а плагин jQuery Migrate 3.0 поможет определить проблемы совместимости в коде.
Файлы jQuery 3.0 доступны из CDN:
https://code.jquery.com/jquery-3.0.0.js
https://code.jquery.com/jquery-3.0.0.min.js
Также можно установить через npm:
npm install jquery@3.0.0
Кроме того, есть релиз jQuery Migrate 3.0. Настоятельно рекомендуется его использовать для устранения проблем, связанных с измененным функционалом в jQuery 3.0. Файлы также доступны в CDN:
https://code.jquery.com/jquery-migrate-3.0.0.js
https://code.jquery.com/jquery-migrate-3.0.0.min.js
И в npm:
npm install jquery-migrate@3.0.0
Для подробной информации об апгрейде веток jQuery 1.x и jQuery 2.x на jQuery 3.0 с плагином jQuery Migrate, читайте пост jQuery Migrate 1.4.1.
Тонкая сборка
Если Вам не нужен AJAX, или предпочитаете использовать одну из множества библиотек, ориентированных на AJAX-запросы, а также проще использовать комбинацию CSS с манипуляциями классов для всей анимации, то наряду с обычной версией jQuery, включающей в себя AJAX и модули эффектов, выпущена «тонкая» версия, которая их не содержит. В общем, этот код считается устаревшим и мы просто его выбросили (шутка). В наше время размер jQuery очень редко беспокоит производительность, но тонкая версия на целых 6 Кб меньше обычной — 23.6к против 30к.
Эти файлы также доступны в CDN:
https://code.jquery.com/jquery-3.0.0.slim.js
https://code.jquery.com/jquery-3.0.0.slim.min.js
Эта сборка создана при помощи кастомной сборки API, позволяющей включать или исключать любые модули. Для получения дополнительной информации читайте jQuery README.
Совместимость с jQuery UI и jQuery Mobile
Большинство методов будет работать, но есть несколько моментов, которые будут реализованы в ближайшее время в jQuery UI и jQuery Mobile. Если Вы обнаружили проблему, имейте ввиду, что она может быть уже опубликована раннее и при помощи плагина jQuery Migrate 3.0 устранена.
Большие изменения
В этой статье приведены лишь основные моменты новых возможностей, улучшений и исправлений. Более подробно можно прочитать в инструкции по апгрейду. Полный список исправленных проблем доступен в нашем баг-трекере на GitHub. Если Вы читали блог по 3.0.0-rc1, приведенные ниже функции не изменились.
jQuery.Deferred теперь Promises/A+ совместимо
Объекты jQuery.Deferred были обновлены для совместимости с Promises/A+ и ES2015 Promises и проверены при помощи Promises/A+ Compliance Test Suite. Это значит, что в методе .then() необходимо внести несколько существенных изменений. Конечно, можно восстановить любое использование .then() путем переименования в .pipe(), ныне считающимся устаревшим (и имеющим одинаковую сигнатуру).
1 исправление
Добавили в .then() функцию обратного вызова (колбэк). Раньше приходилось вызывать исключение для выполнения функции обратного вызова. При этом, любые данные, опирающиеся на возврате ответа никогда не вернутся в качестве исключений.
Example: uncaught exceptions vs. rejection valuesvar deferred = jQuery.Deferred();
deferred.then(function() {
console.log("first callback");
thrownewError("error in callback");
})
.then(function() {
console.log("second callback");
}, function(err) {
console.log("rejection callback", err instanceofError);
});
deferred.resolve();
2 исправление
Раньше при регистрации «first callback» получали ошибку и весь последующий код прекращал работу. Ни второй «колбэк», ни третий не были зарегистрированы. Новый, совместимый со стандартами «колбэк», в случае успеха возвращает true. err — это значение отказа первого колбэка.
Состояние разрешения Deferred, созданного .then(), сейчас контролируется обратными вызовами-исключениями, возвращающими значения и non-thenable. В предыдущих версия, возвращались rejection значения.
Example: returns from rejection callbacksvar deferred = jQuery.Deferred();
deferred.then(null, function(value) {
console.log("rejection callback 1", value);
return"value2";
})
.then(function(value) {
console.log("success callback 2", value);
thrownewError("exception value");
}, function(value) {
console.log("rejection callback 2", value);
})
.then(null, function(value) {
console.log("rejection callback 3", value);
});
deferred.reject("value1");
Раннее, лог содержал “rejection callback 1 value1”, “rejection callback 2 value2”, and “rejection callback 3 undefined”.
Совместимый с новыми стандартами метод будет записывать логи вида: “rejection callback 1 value1”, “success callback 2 value2″, and “rejection callback 3 [object Error]”.
3 исправление
Колбэк всегда вызывается асинхронно, даже если Deferred был возвращен. Раньше они были синхронными.
Example: async vs syncvar deferred = jQuery.Deferred();
deferred.resolve();
deferred.then(function() {
console.log("success callback");
});
console.log("after binding");
Раньше, лог содержал “success callback” then “after binding”. Теперь будет иметь вид “after binding” and then “success callback”.
ВНИМАНИЕ! В то время, как пойманные исключения имеют преимущества для отладки в браузере, это гораздо более «дружелюбный» метод, чтобы изучить причину возникновения колбэков. Имейте ввиду, что это всегда налагает на Вас ответственность в добавлении хотя бы одного колбэка для обработки отказов. В противном случае, ошибки могут остаться незамеченными…
Разработан совместимый с Deferreds плагин для помощи в дебаге — Promises/A+. Если Вы не видите нужной информации об ошибке в консоли для определения его источника, проверьте, установлен ли плагин jQuery Deferred Reporter Plugin.
jQuery.when также был обновлен для принятия любого thenable объекта, который включает в себя собственные объекты Promise.
https://github.com/jquery/jquery/issues/1722
https://github.com/jquery/jquery/issues/2102
Добавлен .catch() в Deferreds
Метод catch() был добавлен в качестве псевдонима для .then(null, fn).
https://github.com/jquery/jquery/issues/2102
В случае ошибок главное — не молчать
Возможно, Вы когда-либо задавались сумасшедшим вопросом: «что за смещение окна?».
В прошлом, jQuery иногда пыталась вернуть такое нечто вместо обработки ошибок. В данном конкретном случае просит сместить окно до тех пор, пока оно не будет в положении { top: 0, left: 0 }. С помощью jQuery 3.0 такие случаи будут бросать ошибки, игнорируя эти безбашенные ответы.
https://github.com/jquery/jquery/issues/1784
Удалены устаревшие псевдонимы событий
.load, .unload и .error удалены. Вместо этого используйте .on().
https://github.com/jquery/jquery/issues/2286
Теперь с использованием анимации
requestAnimationFrame
На платформах, поддерживающих requestAnimationFrameAPI, который нынче всюду, кроме IE <= 9 и Android < 4.4, jQuery теперь будет использовать его для реализации анимации. Это должно увеличить плавность отрисовки, и уменьшить количество затраченного процессорного времени, следовательно, экономя заряд батареи на портативных устройствах.
Использование requestAnimationFrame несколько лет назад создало бы серьезные проблемы совместимости с существующим кодом, поэтому должен был исключен в то время. Сейчас существует возможность приостановки выполнения анимации в то время, когда вкладка браузера «выходит» из поля зрения. Например, переключившись на другую вкладку. Тем не менее, любой код, зависящий от анимации, всегда работает практически в режиме реального времени и создает нереальную нагрузку.
Массивные ускорители для некоторых кастомных селекторов jQuery
Благодаря детективным работам Пола Ириш (Paul Irish) из Google, удалось определить некоторые случаи, когда упускалась кучу работы с пользовательскими селекторами как, например, :visible многократно использовался в одном и том же документе. Этот редкий случай позволяет ускорить работу до 17 раз!
Имейте ввиду, что даже с этим улучшением, использование селекторов :visible и :hidden может быть затратным, потому что они зависят от браузера, который и определяет видим ли он сейчас на странице. Это может потребовать, в худшем случае, полный перерасчет CSS и разметки страницы! В то время, пока не препятствуется их использованию, рекомендуется проверить свои страницы для обнаружения проблем с производительностью.
Эти изменения фактически превратили его в 1.12/2.2, но разработчики хотели его улучшить до jQuery 3.0.
https://github.com/jquery/jquery/issues/2042
Как упоминалось выше, руководство по апгрейду теперь доступно всем, кто желает использовать эту версию. Помимо основной инструкции по апгрейду, оно также включает в себя более подробное описание остальных изменений.
Комментарии:
Нет комментариев к этой статье.