17 нововведень jQuery 3 і поради щодо їх використання

Пройшло вже понад 10 років з того часу, як бібліотека jQuery почала своє повсюдне поширення в Інтернеті, вона й дотепер користується великою популярністю. У липні 2015 року jQuery анонсувала альфа-версию 3.0 – найбільше оновлення за довгі роки.

Поточна версія 3.1.1, що вийшла у вересні 2016 року, виправила багато багів, додала нові методи і видалила надмірні, також змінивши поведінку деяких функцій. Давайте розберемося в нововведеннях, які були представлені в цій версії.

Методи приховування і відображення

Для кращої сумісності з адаптивним дизайном jQuery3 була вдосконалена, отримавши можливість приховування декількох елементів. Тести показали, що нова версія виконує це на 2 % швидше за попередню.

Крім того, методи .hide (), .show () і .toggle () орієнтуватимуться на inline-стилі. Ця особливість надає можливість коректно працювати з функцією display, що дозволить правилам CSS змінюватися динамічно залежно від таких подій, як зміна дозволу вікна і орієнтації екрана.

Методи wrapAll () і unwrap ()

У jQuery 2 метод .wrapAll () при передачі функції як аргументу поводився так само, як і метод .wrap (). Це змінили: тепер .wrapAll (function) викликає функцію і використовує рядкове представлення результату як обгортку колекції.

$( "div" ).wrapAll (function ( /* No index argument, since the function would be executed only once */ ) {    // context is equal to the first found element    return "

“;});

У jQuery 3 також з’явився опціональний параметр-селектор методу unwrap (). Це нововведення дозволяє передавати методу рядкове значення, яке містить вираз селектора.

Смуги прокрутки висоти і ширини тепер враховуються

У jQuery 2 виклик $(window).width () повертав ширину вмісту, не враховуючи смуги прокрутки, додані браузером, коли вміст перевищував розміри елемента. Для того щоб надати можливість виміру, еквівалентну CSS-медіазапиту, $(window).outerWidth () і $(window).outerHeight () тепер повертають ширину і довжину з урахуванням смуг прокрутки, що еквівалентно властивості DOM window.innerWidth.

Поведінка data ()

У jQuery 3 поведінка методу data () була трохи змінена, щоб він підходив під специфікації Dataset API. Тепер він переводить імена властивостей у верблюжу нотацію.

var $elem = $ ('#container'); $elem.data ({ 'custom - property': 'Hello World'}); console.log ($elem.data());

При використанні старої версії Ви матимете такий результат:

{custom-property: "Hello World"}

У jQuery 3 Ви отримаєте:

{customProperty: "Hello World"}

Як Ви помітили, назва параметра переведена у верблюжу нотацію, тоді як в старих версіях параметр залишався в нижньому регістрі з дефісом.

Підтримка SVG за операцій з класами

jQuery дотепер не повністю підтримує SVG, але методи на кшталт .hasClass () чи .addClass (), які управляють CSS-класами, можуть бути використані для роботи з SVG. Ви можете змінювати або знаходити класи в SVG, потім застосовувати стилі до класів, використовуючи CSS.

Фільтри приховування і відображення

jQuery 3 змінює сенс фільтрів :visible і :hidden. Він сприймає елементи як :visible, якщо у них є хоч якісь вікна макета, в тому числі ті, які мають нульову ширину і довжину. Для прикладу, елемент br і рядкові елементи без вмісту будуть виділені фільтром :visible.

Якщо Ви маєте наступну HTML-сторінку:

 

і запускаєте вираз:

console.log ($('body :visible').length);

то в jQuery 2, Ви отримаєте результат 0, а в третій версії результат дорівнюватиме3.

jQuery більше не округлює параметри висоти і ширини

Тепер jQuery повертає дробові значення .width () і .height () замість цілого числа, якщо браузер підтримує це. Для користувачів, яким потрібна субпіксельна точність (наприклад, при дизайні веб-сайтів), це може бути корисним.

Наприклад, у вас є 3 елементи із шириною, що дорівнює одній третій (33.333333 %), усередині контейнера шириною 100px:

 

Якщо Ви запросите ширину дочірнього елемента:

$('.container div').width ();

то отримаєте значення 33.33333, що буде точнішим результатом.

Додатковий рівень захисту

Додатковий рівень був доданий для захисту від міжсайтового скриптингу (XSS). Розробникам тепер треба уточнювати dataType:" script" в опціях методів $.ajax () і $.get (). Це запобігає можливості атак. Надаємо приклад коду:

$.ajax ({ accepts: {
mynewcustomtype: 'application/abc - some - custom - type'}, // how to deserialize a 'mynewcustomtype' converters: { 'text mynewcustomtype': function (result) { // do things return newresult; } }, // Expect a 'mynewcustomtype' back from server dataType: 'mynewcustomtype'});

Непридатний хеш

jQuery 3 повертає синтаксичну помилку, якщо рядок селектора складається лише з хеша, типу jQuery ("#") чи .find ("#"). У старій версії $("#") повертав порожню множину, а .find ("#") – помилку.

Новий метод для виділення рядків

Новий метод jQuery.escapeSelector () дозволяє Вам виділити будь-який рядок або символ, які мають певне значення в CSS-селекторах.

Наприклад, якщо елемент на сторінці має id “abc.xyz”, то він не може бути вибраний методом $("abc.xyz"), оскільки селектор буде розпізнаний як елемент з id ” abc”, і класом ” xyz”. Проте він може бути вибраний новою функцією $("#" + $.escapeSelector ("abc.xyz")).

Аргументи jQuery.when ()

У jQuery 3 при додаванні методом then () аргументу до $.when (), він повертає його promise-версію. Це розширює можливості для введення, враховуючи проміси Bluebird і проміси ES6, що дає можливість писати складніші асинхронні зворотні виклики.

$.when ($.ajax ("test.apx")).then (function (data, textStatus, jqHXR){
alert (jqHXR.status); //виводить 200 });

Хеш в URL

Тепер функція jQuery.ajax () більше не видаляє хеш в URL, якщо він є. Проте Вам доведеться видаляти його вручну до відправки запиту, якщо сервер на іншому кінці з’єднання не може обробити URL з хешем.

Deferred-об’єкти сумісні з JS-промісами

Deferred ‘и – це об’єкти які можна сполучати ланцюговими зворотними викликами. jQuery 3 зробив їх сумісними з новими стандартами Promises/A+. Також є ключова зміна у функції .then (). Будь-який виняток, що виводиться у рамках зворотного виклику .then (), тепер конвертується у відхилюване значення. Непромісоподібні значення, повернені обробником відхилень, міняються на виконувані значення.

Застарілий deferred- метод:

$.ajax ("/stat") .done (function (data) { whoops (); // консоль виводить: "whoops is not a function" // більше не виконується }) .fail (function (arg) { // не виконується });

Новий стандарт поведінки Promises/A+:

$.ajax ("/stat") .then (function (data) { whoops (); // консоль виводить "jQuery.Deferred exception: whoops is not a function" // більше не виконується }) .catch (function (arg) { // arg is an Error object - "whoops is not a function" });

Новий API для анімації

jQuery 3 використовує API requestAnimationFrame () для роботи з анімацією. Цей API відтворює анімації плавніше і швидше, витрачаючи менше обчислювального часу. Він використовується лише в тих браузерах, які підтримують цей API. Для старих же браузерів, таких як Internet Explorer 9, jQuery використовує старий API як запасний варіант.

jQuery 3 працює в строгому режимі

Більшість браузерів, підтримуваних jQuery3, використовують строгий режим (strict mode). Нова версія була створена з урахуванням цього. Попри те, що jQuery 3 була написана в суворому режимі, Вашому коду не обов’язково використовувати його. Отже, Вам не треба переписувати наявний код, якщо Ви бажаєте перейти на нову версію. Проте є один виняток: деякі версії ASP.NET несумісні через суворий режим.

Нова сигнатура методів get і post

jQuery отримала нові сигнатури сервісних функцій $.get () і $.post () для одноманітності з $.ajax ().

$.get ([settings]) $.post ([settings])

Оператор циклу for.of

jQuery 3 підтримує оператор циклу for.of, який є у специфікації ECMAScript 6. Це дозволяє Вам запускати цикл за ітерируваними об’єктами, такими як Map, Set, Array і т. д.

Оператор циклу for.of може бути використаний для заміни синтаксичної конструкції $.each ( ). Припустимо, що Ви хочете застосувати ім’я до кожного ввідного елемента сторінки.

Код на jQuery 2 виглядає так:

var $inputs = $ ('input'); for (var j = 0; j < $inputs.length; j++) { $inputs[j].id = 'input - ' + j; }

Код на jQuery 3 матиме наступний вигляд:

var $inputs = $ ('input');var j = 0; for (var input of $inputs) { input.id = 'input - ' + j++; }

Переклад статті What’s New In jQuery 3 || 17 Added Features & How To Use Them