Що нового в jQuery 3.0

Пройшло вже більше 10 років як jQuery завоював популярність у веб-розробників. І нещодавно вийшло важливе оновлення: jQuery 3.0. Воно робить jQuery ще швидшим, зберігаючи максимальну сумісність зі старими версіями. Ви можете завантажити jQuery 3.0 тут. Також є гід по оновленню так сирцевий код.

В цій статті ми розглянемо ключові зміни та те, як їх можна використати у своїх проектах.

1. jQuery 3.0 тепер написана в суворому режимі

Перш за все, потрібно відмітити, що jQuery тепер використовує суворий режим (strict mode).

Ваш код написаний в звичайному режимі? Не хвилюйтеся, ці режими спокійно вживаються поряд.

2. Цикл for .. of

jQuery 3.0 підтримує цикл for .. of, що прийшов на зміну $.each(). Це частина нового стандарту ES6. Він дозволяє в більш зручний шлях проходити по ітерованих об'єктах, таких як масиви і множини. Але пам'ятайте, що працює він лише в нових браузерах.

var items = $('.random-class');
// Старий синтаксис
$.each(items, function(index, value) {
 // щось робить
});
// Новий
for(let item of items) {
 // щось робить
};

3. requestAnimationFrame() для анімацій

jQuery 3.0 використовує API requestAnimationFrame() для анімацій. Це робить їх плавнішими, швидшими та потребує менше ресурсів. Підтримується воно майже всіма новими браузерами. А для таких мамонтів як IE9 використовується старий API. Більше про це можна почитати тут.

4. escapeSelector() для еканування запитів

Новий метод $.escapeSelector() дозволяє еканувати стрічки-запити. Тепер, якщо в назві вашого класу чи ідентифікатора є ключові символи CSS (як крапка чи крапка з комою), це не викличе некоректної роботи. Взагалі, це не дуже розповсюджена помилка, але тепер ви знаєте як її вирішити :)

<!-- ваш елемент -->
<div id="abc.def"></div>

// буде шукати елемент з id='abc' та class='def'
$('#abc.def')
// а тепер буде працювати як потрібно
$( '#' + $.escapeSelector( 'abc.def' ) )

5. Додатковий захист від XSS-атак

jQuery 3.0 додає додатковий захист від Cross-Site-Scripting-атак. Тепер, при завантаженні скрипту з іншого сайту вам потрібно явно це вказати, передавши параметром dataType: 'script'.

6. Видалення спеціальних відкладених методів з .ajax()

Об'єкт jqXHR, що повертається після виклику $.ajax() є відкладеним (Deferre). Раніше він мав ще три методи, що співпадали з іменами аргументів: success, error та complete. В третій версії їх прибрали, тепер ви повинні використовувати стандартні відкладені методи: fail, done та always. Або використовувати нові методи then та catch.

7. Методи .get() та .post() тепер мають нову сигнатуру

Також в третій версії до методів $.get() та $.post() додали параметр settings. Це об'єкт, що містить налаштування для запиту, він ідентичний тому, що передають в $.ajax(), за виключенням того, що ігнорує параметр method.

//HTTP Get
$.get([settings])
//HTTP Post
$.post([settings])

8. Маніпуляція з класами тепер підтримує SVG

До цього jQuery повністю не підтримував SVG. В новій версії це виправили. Тепер методи для маніпулювання класами (такі як .addClass() чи .hasClass()) працюють і для SVG.

9. Зрозуміла логіка show/hide

Це одна з найважливіших змін, яку вам доведеться пам'ятати завжди. Тепер методи .show(), .hide() та .toggle() використовують інлайнові стилі.

Якщо хочете більше ознайомитися з темою, то ось таблиця від розробників jQuery і дискусія на GitGub.

10. Точніші значення від методів .width () та .height ()

Раніше значення округлювалось до цілих, а тепер повертається більше точне значення: float з одним знаком після крапки. Це дуже корисне нововведення, адже іноді розробнику потрібна велика точність, яку отримати раніше було неможливо.

11. Методи .bind() та .delegate() об'явленні застарілими

В jQuery 1.7 з'явився новий метод для призначення обробників подій. А вже в третій версії старий API позначили як застарілий, і не виключено, що його видалять в наступних версіях. А саме це методи .bind(), unbind(), .delegate() та .undelegate(). Тому дуже рекомендовано використовувати .on()/.off().

Висновок

Багато людей вважають jQuery вже мертвим, і що йому нема місця в сучасному вебі. Але попри все вона розвивається і використовується. Ось невеличка статистика.