Обновление на версию 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("#")» теперь будут вызывать ошибку.

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

results matching ""

    No results matching ""