jQuery 3.0 Final Released

9 червня 2016 року відбувся офіційний реліз jQuery 3.0, яка була в розробці з жовтня 2014 року. Нашою метою було створення більш легкої і швидкої версії jQuery (звичайно, з зворотної сумісності). Ми видалили всі старі милиці для IE і використовували деякий більш сучасне веб API там, де це необхідно. jQuery 3.0 є продовженням гілки 2.x, але з деякими змінами, які давно хотіли внести. Такі гілки як 1.12 та 2.2 будуть отримувати критичні патчі протягом деякого часу, але очікувати новий функціонал в них не варто. jQuery 3.0 — це майбутнє jQuery. Якщо раптом Вам потрібна підтримка IE 6-8, Ви можете продовжувати використовувати реліз версії 1.12.

image


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

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

Зрозуміло, файли jQuery 3.0 доступні з CDN:

https://code.jquery.com/jquery-3.0.0.js
https://code.jquery.com/jquery-3.0.0.min.js

Також можна встановити через npm:

npm install jquery@3.0.0


Крім того, у нас є реліз jQuery Migrate 3.0. Ми настійно рекомендуємо його використовувати для усунення проблем, пов'язаних зі зміненим функціоналом в jQuery 3.0. Файли також доступні в CDN:

https://code.jquery.com/jquery-migrate-3.0.0.js
https://code.jquery.com/jquery-migrate-3.0.0.min.js

І в npm:

npm install jquery-migrate@3.0.0


Для докладної інформації про апгрейд гілок jQuery 1.x і jQuery 2.x на jQuery 3.0 з плагіном jQuery Migrate, читайте пост jQuery Migrate 1.4.1.

Тонка збірка
Нарешті-то ми додали щось нове до цього релізу. Якщо Вам не потрібен AJAX, або віддаєте перевагу використовувати одну з бібліотек, орієнтованих на AJAX-запити, а також простіше використовувати комбінацію CSS з маніпуляціями класів для всієї анімації, то поряд з звичайною версією jQuery, що включає в себе AJAX і модулі ефектів, ми випускаємо «тонку» версію, яка їх не містить. Загалом, цей код вважається застарілим і ми просто його викинули (жарт). В наш час розмір jQuery дуже рідко турбує продуктивність, але тонка версія на цілих 6 Кб менше звичайної — 23.6 до проти 30к.

Ці файли також доступні в CDN:

https://code.jquery.com/jquery-3.0.0.slim.js
https://code.jquery.com/jquery-3.0.0.slim.min.js

Ця збірка створена за допомогою кастомних складання API, що дозволяє включати або виключати будь-які модулі. Для отримання додаткової інформації читайте jQuery README.

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

Великі зміни
У цій статті наведено лише основні моменти нових можливостей, поліпшень і виправлень. Більш докладно можна прочитати в інструкції по апгрейду. Повний список виправлених проблем доступний в нашому баг-трекері на GitHub. Якщо Ви читали блог 3.0.0-rc1, наведені нижче функції не змінилися.

jQuery.Deferred тепер Promises/A+ сумісно

Об'єкти jQuery.Deferred були оновлені для сумісності з Promises/A+ і ES2015 Promises і перевірені за допомогою Promises/A+ Compliance Test Suite. Це означає, що в методі .then() необхідно внести декілька істотних змін. Звичайно, можна відновити будь-яке використання .then() шляхом перейменування в .pipe(), нині вважається застарілим (і мають однакову підпис).

1 виправлення
Додали у .then() функцію зворотного виклику (колбек). Раніше доводилося викликати виключення для виконання функції зворотного виклику. При цьому, будь-які дані, що спираються на поверненні відповіді ніколи не повернуться в якості винятків.

Example: uncaught exceptions vs. rejection values


var deferred = jQuery.Deferred();
deferred.then(function() {
console.log("first callback");
throw new Error("error in callback");
})
.then(function() {
console.log("second callback");
}, function(err) {
console.log("rejection callback", err instanceof Error);
});
deferred.resolve();


2 виправлення
Раніше при реєстрації «first callback» отримували помилку і весь наступний код припиняв роботу. Ні другий «колбек», ні третій не були зареєстровані. Новий, сумісний зі стандартами «колбек», у разі успіху повертає true. err — це значення відмови першого колбэка.

Стан дозволу Deferred, створеного .then(), зараз контролюється зворотніми викликами-винятками, які повертають значення і non-thenable. У попередніх версія, поверталися rejection значення.
Example: returns from rejection callbacks


var deferred = jQuery.Deferred();
deferred.then(null, function(value) {
console.log("rejection callback 1", value);
return "value2";
})
.then(function(value) {
console.log("success callback 2", value);
throw new Error("exception value");
}, function(value) {
console.log("rejection callback 2", value);
})
.then(null, function(value) {
console.log("rejection callback 3", value);
});
deferred.reject("value1");


Раннє, лог містив «rejection callback 1 value1», «rejection callback 2 value2», and «rejection callback 3 undefined».

Сумісний з новими стандартами метод буде записувати логи виду: «rejection callback 1 value1», «success callback 2 value2», and «rejection callback 3 [object Error]».

3 виправлення
Колбек завжди викликається асинхронно, навіть якщо Deferred був повернутий. Раніше вони були синхронними.

Example: async vs sync


var deferred = jQuery.Deferred();
deferred.resolve();
deferred.then(function() {
console.log("success callback");
});
console.log("after binding");


Раніше, лог містив «success callback» then «after binding». Тепер буде мати вигляд «after binding» and then «success callback».

УВАГА! В той час, як спіймані винятку мають переваги для налагодження в браузері, це набагато більш «дружній» метод, щоб вивчити причину виникнення колбэков. Майте на увазі, що це завжди накладає на Вас відповідальність у доповнення хоча б одного колбэка для обробки відмов. В іншому випадку, помилки можуть залишитися непоміченими...


Ми розробили сумісний з Deferreds плагін для допомоги в дебаге — Promises/A+. Якщо Ви не бачите потрібної інформації про помилку в консолі для визначення його джерела, перевірте чи встановлено плагін jQuery Deferred Reporter Plugin.

jQuery.when також був оновлений для прийняття будь-якого thenable об'єкта, який включає в себе власні об'єкти Promise.
https://github.com/jquery/jquery/issues/1722
https://github.com/jquery/jquery/issues/2102

Доданий .catch() в Deferreds

Метод catch() був доданий в якості псевдоніма для .then(null, fn).
https://github.com/jquery/jquery/issues/2102

У разі помилок головне не мовчати

Можливо, Ви коли-небудь задавалися божевільним питанням «що за зміщення вікна?».

У минулому, jQuery іноді намагалася повернути таке щось замість обробки помилок. В даному конкретному випадку просить змістити вікно до тих пір, поки воно не буде в положенні { top: 0, left: 0 }. За допомогою jQuery 3.0 такі випадки будуть кидати помилки, ігноруючи ці шалені відповіді.
https://github.com/jquery/jquery/issues/1784

Видалені застарілі псевдоніми подій

.load, .unload та .error видалені. Замість цього використовуйте .on().
https://github.com/jquery/jquery/issues/2286

Тепер з використанням анімації

requestAnimationFrame

На платформах, які підтримують requestAnimationFrame API, який нині всюди, крім IE <= 9 і Android < 4.4, jQuery тепер буде використовувати його для реалізації анімації. Це повинно збільшити плавність відтворення, і зменшити кількість витраченого процесорного часу, отже, заощаджуючи заряд батареї на портативних пристроях.

Використання requestAnimationFram кілька років тому створило б серйозні проблеми сумісності з існуючими кодом, тому ми повинні були виключити його в той час. Зараз існує можливість призупинення виконання анімації в той час, коли вкладка браузера «виходить» з поля зору. Наприклад, переключившись на іншу вкладку. Тим не менш, будь-код, що залежить від анімації, завжди працює практично в режимі реального часу і створює нереальну навантаження.

Масивні прискорювачі для деяких кастомних селекторів jQuery

Завдяки детективним робіт Статі Іріша (Paul Irish) з Google, нам вдалося визначити деякі випадки, коли ми втрачали купу роботи з користувацькими селекторами як, наприклад, :visible багато разів використовувався в одному і тому ж документі. Цей рідкісний випадок дозволяє прискорити роботу до 17 разів!

Майте через, що навіть з цим поліпшенням, використання селекторів :visible та :hidden може бути витратним, тому що вони залежать від браузера, який і визначає бачимо він зараз на сторінці. Це може зажадати, в гіршому випадку, повний перерахунок CSS і розмітки сторінки! У той час, поки ми не перешкоджали їх використання, рекомендуємо перевірити свої сторінки для виявлення проблем з продуктивністю.

Ці зміни фактично перетворили його в 1.12/2.2, але ми б хотіли його поліпшити в jQuery 3.0.
https://github.com/jquery/jquery/issues/2042

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

Changelog
Список змін тут

Ajax

  • Выпнули 21 байт (eaa3e9f)
  • Збереження кешу URL-запитів (#1732, e077ffb)
  • Виконання колбэка jQuery#load з коректним контекстом (#3035, 5d20a3c)
  • Велика честь забезпечення ajaxSettings.traditional (#3023, df2051c)
  • Видалення невикористаної функції jQuery.trim (0bd98b1)


Атрибут

  • Уникання нескінченної рекурсії на нестрочных аттрибутах (#3133, e06fda6)
  • Додано коментар підтримки і виправлений хук з посиланням @ tabIndex (9cb89bf)
  • Згорнути/розгорнути простір для присвоювання значень при виборі (#2978, 7052698)
  • Видалена перевірка надмірності батьків (b43a368)
  • Виправлено обрана опція в IE <= 11 (#2732, 780cac8)


CSS

  • IE 11 не працює всередині iframe в режимі повного екрану (#3041, ff1a082)
  • Перемикання окремих елементів як видимий, якщо вони не мають параметр display: none#2863, 755e7cc)
  • Переконайтеся, що elem.ownerDocument.defaultView не є нульовим (#2866, 35c3148)
  • Додати анімаційну ітерацію лічильника в cssNumber (#2792, df822ca)
  • Відновити поведінка перевизначення каскаду в .show (#2654, #2308, dba93f7)
  • Зупинити Firefox від лікування відключених елементів як приховано-каскадних (#2833, fe05cf3)


Core



Deferred

  • Separate the two paths in jQuery.when#3029, 356a3bc)
  • Provide explicit undefined context for jQuery.when raw casts (#3082, 7f1e593)
  • Remove default callback context (#3060, 7608437)
  • Warn on exceptions that are likely programming errors#2736, 36a7cf9)
  • Propagate progress correctly from unwrapped promises (#3062, d5dae25)
  • Make jQuery.when synchronous when possible (#3100, de71e97)
  • Remove undocumented progress notifications in $.when#2710, bdf1b8f)
  • Give better stack diagnostics on exceptions (07c11c0)


Dimensions

  • Add tests for negative borders & paddings (f00dd0f)


Docs

  • Fix various spelling errorsaae4411)
  • Update support comments related to IE (693f1b5)
  • Fix an incorrect comment in the attributes module (5430c54)
  • Updated links to https where they are supported. b0b280c)
  • Update support comments to follow the new syntax (6072d15)
  • Use https where possible (1de8346)
  • Use HTTPS URLs for jsfiddle & jsbin (63a303f)
  • Add FAQ to reduce noise in issues (dbdc4b7)
  • Add a note about loading source with AMD (#2714, e0c25ab)
  • Add note about organization code with AMD (#2750, dbc4608)
  • Reference new feature guidelines and API tenets (#2320, 6054139)


Effects



Event

  • Allow constructing a jQuery.Event without a target (#3139, 2df590e)
  • Add touch event properties, eliminates need for a plugin#3104, f595808)
  • Add the most commonly used pointer event properties (7d21f02)
  • Remove fixHooks, propHooks; switch to ES5 getter with addProp (#3103, #1746, e61fccb)
  • Make event dispatch optimizable by JavaScript engines (9f268ca)
  • Evaluate delegate selectors add at time (#3071, 7fd36ea)
  • Cover invalid delegation selector edge cases (e8825a5)
  • Fix chaining .on() with null handlers (#2846, 17f0e26)
  • Remove pageX/pageY fill for event object (#3092, 931f45f)


Events

  • don't execute native stop(Immediate)Propagation from simulation (#3111, 94efb79)


Manipulation



Offset

  • Resolve strict mode ClientRect «no setter» exception (3befe59)


Selector



Serialize

  • Treat literal and function-returned null/undefined the same (#3005, 9fdbdd3)
  • Reduce size (91850ec)


Support



Tests

  • Take Safari 9.1 into account (234a2d8)
  • Limit selection to #qunit-fixture in attributes.js ddb2c06)
  • Set Edge's expected support for clearCloneStyle to true (28f0329)
  • Fix Deferred tests in Android 5.0's stock Chrome браузер & Yandex.Browser (5c01cb1)
  • Add additional test for jQuery.isPlainObject (728ea2f)
  • Build: update QUnit and fix incorrect test (b97c8d3)
  • Fix manipulation tests in Android 4.4 (0b0d4c6)
  • Remove side-effects of attributes one test (f9ea869)
  • Account for new offset tests (f52fa81)
  • Make iframe tests wait after checking isReady (08d73d7)
  • Refactor testIframe() to make it DRYer and more consistent (e5ffcb0)
  • Weaken sync-assumption from jQuery.when to jQuery.ready.thenf496182)
  • Test element position outside view (#2909, a2f63ff)
  • Make the regex catching Safari 9.0/9.1 more resilient (7f2ebd2)


Traversing

  • .not/.filter consistency with non-elements (#2808, 0e2f8f9)
  • Never let .closest() match positional selectors (#2796, a268f52)
  • Restore jQuery push behavior in .find (#2370, 4d3050b)

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.