Що нового в jQuery 3 - 10 Coolest Features

jQuery 3.0, новий великий реліз jQuery нарешті вийшов. Спільнота веб-розробників чекає цього важливого кроку з жовтня 2014 року, коли команда jQuery почала працювати над новою основною версією до червня 2016 року, коли остаточний випуск немає.

Примітка до випуску обіцяє a стрункіше і швидше jQuery, с зворотна сумісність в пам'яті. У цій публікації ми розглянемо деякі нові можливості jQuery 3.0, щоб дати вам огляд того, як він змінює ландшафт JavaScript.

З чого почати

Якщо ви хочете завантажити jQuery 3.0 для самостійного експерименту, перейдіть прямо на сторінку завантаження. Також варто ознайомитися з Посібником з оновлення або з вихідним кодом.

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

Ця стаття не охоплює все нові можливості jQuery 3.0, тільки більш цікаві з них: краща якість коду, інтеграція нових функцій ECMAScript 6, новий API для анімації, новий метод для усунення рядків, підвищення підтримки SVG, поліпшення асинхронних зворотних викликів, краща сумісність з реагуючими сайтами і підвищеної безпеки.

1. Старий IE Виправлено

Однією з головних цілей нового основного випуску було зробити це швидше і гладкіше, тому старі хаки та обхідні шляхи, пов'язані з IE9- видалено. Це означає, що якщо ви хочете або потребуєте підтримки IE6-8, вам доведеться продовжувати використовувати останню версію 1.12 звільнення, як і то 2.x серії не мають повної підтримки для старих користувачів Internet Explorer (IE9-). Перегляньте примітки щодо підтримки браузера в документах.

Зверніть увагу, що є також багато застарілих функцій у jQuery 3. Великим недоліком Посібника з оновлення є те, що застарілі функції - станом на червень 2016 року - не згруповані, тому, якщо ви зацікавлені в них, вам потрібно переглянути їх у засобі пошуку вашого веб-переглядача ( Ctrl + F).

2. jQuery 3.0 виконується в жорсткому режимі

Оскільки більшість браузерів, що підтримуються JQuery 3, підтримують суворий режим, новий великий випуск був побудований з урахуванням цієї директиви.

Хоча jQuery 3 написано в строгому режимі, важливо знати це Ваш код не потрібно виконувати в суворому режимі, так ви не потрібно переписувати існуючий код jQuery, якщо ви хочете перенести його на JQuery 3. Strict & non-strict режим JavaScript може щасливо співіснувати.

Є одне виключення: деякі версії ASP.NET що - через суворий режим - є не сумісна з jQuery 3. Якщо ви працюєте з ASP.NET, ви можете подивитися на деталі в документах.

3. Для… циклів введено

jQuery 3 підтримує для… висловлювання, новий вид для петля, введена в ECMAScript 6. Це дає більш простий шлях цикл над об'єктами, що переходять, такі як масиви, карти та набори.

У jQuery за… петля може замінити першу $ .each (…) Синтаксис і може полегшити перегляд елементів колекції jQuery.

Зверніть увагу, що за… петля буде тільки робота або в такому середовищі підтримує ECMAScript 6, або якщо ви використовувати компілятор JavaScript наприклад, Вавилон.

4. Анімації Отримали новий API

jQuery 3 використовує API requestAnimationFrame () для виконання анімації, створення анімації працювати більш плавно і швидше. Новий API використовується тільки в браузерах, які його підтримують; для старих браузерів (тобто IE9) jQuery використовує свій попередній API як резервний метод для відображення анімації.

RequestAnimationFrame якийсь час відсутній, якщо ви зацікавлені в тому, що він знає або чому ви повинні використовувати його, CSS Tricks має хороший пост про це.

5. Новий метод вибору рядків зі спеціальним значенням

Новий jQuery.escapeSelector () Метод дозволяє уникнути рядків або символів означає щось ще в CSS для того, щоб мати можливість використовувати його в селекторі jQuery; без виходу з інтерпретатора JavaScript його неможливо правильно зрозуміти.

Документи допомагають нам краще зрозуміти цей метод за допомогою наведеного нижче прикладу.

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

Я не знаю, як часто трапляється такий випадок, але якщо ви натрапите на таку проблему, тепер у вас є простий спосіб швидко виправити її.

6. Методи маніпулювання класами Підтримка SVG

На жаль, jQuery 3 ще не повністю підтримує SVG, але способи jQuery, які керують іменами класів CSS, такими як .addClass () і .hasClass (), тепер можна використовувати цільові документи SVG так само. Це означає, що ви можете змінювати (додавати, видаляти, перемикати) або знаходити класи з jQuery в масштабованої векторної графіки, потім стилюйте класи з CSS.

7. Відкладені об'єкти тепер сумісні з обіцянками JS

JavaScript Promises - використовувані об'єкти для асинхронних обчислень - були стандартизовані в ECMAScript 6; їх поведінка та особливості вказані в стандартах Promises / A +.

У jQuery 3, Відкладені об'єкти були сумісні з новими стандартами Promises / A +. Відкладені кошти ланцюгові об'єкти що дозволяють створювати черги зворотного виклику.

Нові функції змінюються як виконуються асинхронні функції зворотного виклику; Обіцянки дозволяють розробникам писати асинхронний код, який ближче за логікою до синхронного коду.

Див. Приклади коду з Посібника з оновлення або ознайомтеся з цим чудовим підручником Scotch.io про основи обіцянок JavaScript.

8. jQuery.when () Інтерпретує різні аргументи по-різному

The $ .when () Метод забезпечує шлях виконувати функції зворотного виклику. Це частина jQuery з версії 1.5. Це гнучкий метод; він також працює з нульовими аргументами і може також приймати один або кілька об'єктів як аргументи.

jQuery 3 змінює спосіб, як аргументи $ .when () інтерпретуються коли вони містять $. then () метод з якою ви можете передавати додаткові виклики як аргументи до $ .when () метод.

У jQuery 3, якщо додати аргумент введення з потім() метод до $ .when (), аргумент буде інтерпретується як сумісний із Promise.

Це означає, що $ .коли метод зможе прийняти діапазон входів, такі як рідні ES6 обіцянки та обіцянки Bluebird, що дозволяє писати більш складні асинхронні зворотні виклики.

9. Нове відображення / приховування логіки

З метою збільшення сумісність з адаптивним дизайном, код, пов'язаний з показ і приховування елементів оновлено в jQuery 3.

Відтепер .показати (), .приховати (), і .перемикати () Методи будуть зосереджені на вбудовані стилі, замість обчислюваних стилів, таким чином вони будуть краще поважати зміни стилів.

Новий код поважає відображення значення таблиць стилів, коли це можливо, що означає, що правила CSS можуть динамічно змінюються на події, такі як переорієнтація пристрою та зміна розмірів вікна.

Документи стверджують, що найважливішим результатом буде:

"У результаті відключаються елементи більше не вважається прихованим якщо вони не є вбудованими дисплей: немає;, і таким чином .перемикати () волі більше не диференціювати їх з підключених елементів у jQuery 3.0. "

Якщо ви хочете краще зрозуміти результати нової логіки показу / приховання, Ось цікава дискусія Github про це.

Розробники jQuery також опублікували таблицю Документів Google про те, як буде працювати нова поведінка у різних випадках використання.

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

Додано jQuery 3 додатковий захисний шар проти атак наскрізних сценаріїв (XSS), вимагаючи від розробників вказати dataType: "script" в опціях $ .ajax () і $ .get () методів.

Іншими словами, якщо ви хочете виконувати крос-доменні запити сценарію, ви необхідно оголосити це в налаштуваннях цих методів.

Згідно з документами, нова вимога є корисною, коли «віддалений сайт» доставляє вміст, що не є сценарієм але пізніше вирішить служити скриптом, який має шкідливий намір". Зміна не впливає на $ .getScript () Метод, як він встановлює dataType: "script" опція явно.