BlogGitHub

Обновление на версию 3.х

В первую очередь данное обновление коснулось старых версий браузеров, точнее, теперь поддерживаются следующие версии:

  • Internet Explorer 9+

  • Chrome, Edge, Firefox и Safari — благодаря встроенной системе обновлений в эти браузеры поддерживается текущая и предыдущая версии браузеров

  • Opera — в фаворитах не ходит, поэтому поддерживают только текущую версию

  • Safari Mobile iOS 7+

  • Android 4+

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

Большинство приведенных изменений касается не только версии 3.x, но и старых веток, начиная с версий 1.12.x и 2.2.x

AJAX

  • Метод jQuery.ajax() теперь совместим с Promise и вы можете использовать методы then() и catch():

    $.ajax({url:"/get-my-page.html" /* и т.д. */ })
 .then(function() { /* всё ОК */ })
 .catch(function() { /* ошибка */ })

  • Добавлена новая сигнатура для вызова двух AJAX-методов $.get(settings) и $.post(settings), теперь настройки совместимы с $.ajax(settings).

  • При подключении скриптов из другого домена теперь в обязательном порядке требует указания dataType: "script"

  • При выполнении AJAX-запросов и указании URL с хэшем последний более не обрезается, а отправляется на сервер как есть.

Атрибуты

  • Раньше метод removeAttr() для true/false атрибутов типа «checked», «selected» и «readonly» втихую выставлял соответствующее свойство DOM-элемента в «false», теперь извольте делать сие ручками:

    $("input[type=email]").removeAttr("readonly").prop("readonly", false)

  • Если вызовете метод val() для мультиселекта, в котором ничего не выбрано, то получите в ответ пустой массив, а раньше был null

  • Для SVG заработали методы по манипуляции с классами (хотя полноценной поддержки SVG в jQuery нет).

Core

  • Ядро jQuery теперь запускается в strict mode.

  • Обработчики события document-ready теперь запускаются асинхронно, т.е. если какой-то обработчик сфейлил, то это не повлияет на запуск других обработчиков.

  • Метод $.isNumeric() более не пробует кастовать метод toString() для произвольных объектов (кому это надо было?).

  • Методы width(), height() и так далее; раньше, вызвав их для пустой коллекции объектов, мы получали null, теперь – undefined.

  • Официально добавлен promise jQuery.ready, который очень удобно заюзать вместе с $.when():

    $.when($.ready, $.getScript("script.js") )
 .then(function() {
   // документ готов, и скрипт script.js подгружен
 })
 .catch( function() {
   // ошибка
 });

  • Метод jQuery.unique() переименован в jQuery.uniqueSort()

  • Метод jQuery.parseJSON() устарел, переходите на JSON.parse()

  • Внутреннее хранилище данных перешло на camelCase, это важно для тех, кто использовал его, не прибегая к методу data()

Объект Deferred

Как я уже упоминал ранее, объект Deferred теперь совместим с Promise из ES-2015, а это нам грозит переписыванием методов done() на then() и fail() на catch().

Второй важный момент — callback-функции, согласно спецификации ES-2015, должны принимать только один аргумент: для успешного выполнения это некий результат выполнения, в случае возникновения ошибки функция это будет сама ошибка. Если у вас не получается так сделать, то старые функции done() и fail() всё ещё остаются с нами, хоть чую, и их скоро выпилят:

// было
$.get("/get-my-page.html")
 .done(function(data, textStatus, jqXHR) { /* всё ОК */ })
 .fail(function(jqXHR, textStatus, errorThrown) { /* ошибка */ });

// стало
$.get("/get-my-page.html")
 .then(function(data) { /* всё ОК */ })
 .catch(function(error) { /* ошибка */ });

Размеры

Небольшие изменения постигли функции width(), height(), css("width"), и css("height"), теперь они могут возвращать не только integer значение высоты и ширины, но и float, такая точность связана с переходом на использование getBoundingClientRect().

Ещё момент, вызовы $(window).outerWidth() и $(window).outerHeight() теперь будут включать в себя размеры скролбаров окна.

Эффекты

Анимация переехала на использование requestAnimationFrame API, так что теперь всё стало быстрее и красивее.

Функции .show(), .hide() и .toggle() научились запоминать предыдущее состояние CSS-свойства display.

Количество аргументов easing-функций сократили до одного аргумента, который содержит прогресс анимации от 0 до 1.

События

Удалены shorthand-методы для следующих событий: load(), unload() и error(); связано данное изменение с конфликтами возникающие при использовании данных методов, так что переписывайте на on():

// было
$("img").load(fn);

// стало
$("img").on("load", fn);

Удалено синтетическое событие ready, так что on("ready", fn) более не работает, используйте синтаксис $(fn).

Делегированные события, в случае, если их пытаются повесить c использованием неправильных селекторов, теперь будут сразу ругаться и выбрасывать ошибку. Дебажить станет легче:

// пример сломанного селектора div:not
$("body").on("click", "div:not", e => false);

Селекторы

За селекторы :hidden и :visible теперь отвечает getClientRects(); если у запрашиваемого элемента есть layout box, значит, он считается видимым. Как результат, пустой <span> или <br/> теперь считаются видимыми.

Кривые селекторы $("#") и find("#") теперь будут вызывать ошибку.

Описал многое, но не всё, полное руководство доступно на официальном сайте:

PreviousОбновление на версию 2.хNextОбновление на версию 4.х

Last updated