Пройшло вже більше 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></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 вже мертвим, і що йому нема місця в сучасному вебі. Але попри все вона розвивається і використовується. Ось невеличка статистика.
Ще немає коментарів