jQuery 3.0 Final Released

Original author: Timmy Willison
  • Translation
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к.

image

Эти файлы также доступны в 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 теперь будет использовать его для реализации анимации. Это должно увеличить плавность отрисовки, и уменьшить количество затраченного процессорного времени, следовательно, экономя заряд батареи на портативных устройствах.

Использование requestAnimationFrame несколько лет назад создало бы серьезные проблемы совместимости с существующим кодом, поэтому мы должны были исключить его в то время. Сейчас существует возможность приостановки выполнения анимации в то время, когда вкладка браузера «выходит» из поля зрения. Например, переключившись на другую вкладку. Тем не менее, любой код, зависящий от анимации, всегда работает практически в режиме реального времени и создает нереальную нагрузку.

Массивные ускорители для некоторых кастомных селекторов jQuery


Благодаря детективным работам Пола Ириш (Paul Irish) из Google, нам удалось определить некоторые случаи, когда мы упускали кучу работы с пользовательскими селекторами как, например, :visible многократно использовался в одном и том же документе. Этот редкий случай позволяет ускорить работу до 17 раз!

Имейте ввиду, что даже с этим улучшением, использование селекторов :visible и :hidden может быть затратным, потому что они зависят от браузера, который и определяет видим ли он сейчас на странице. Это может потребовать, в худшем случае, полный перерасчет CSS и разметки страницы! В то время, пока мы не препятствовали их использованию, рекомендуем проверить свои страницы для обнаружения проблем с производительностью.

Эти изменения фактически превратили его в 1.12/2.2, но мы бы хотели его улучшить в jQuery 3.0.
https://github.com/jquery/jquery/issues/2042

Как упоминалось выше, руководство по апгрейду теперь доступно всем, кто желает использовать эту версию. Помимо основной инструкции по апгрейду, оно также включает в себя более подробное описание остальных изменений.

Changelog


Список изменений тут

Поддержка браузеров


  • Internet Explorer: 9+
  • Chrome, Edge, Firefox, Safari: текущая и предыдущая версии
  • Opera: текущая версия
  • Safari Mobile iOS: 7+
  • Android 4.0+


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)


Ядро




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 errors (aae4411)
  • 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 code organization 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 at add 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 browser & 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 one attributes 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.then (f496182)
  • 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)

Only registered users can participate in poll. Log in, please.

Какую версию jQuery используете в своих проектах?

Share post

Comments 36

    0
    или предпочитаете использовать один из множества библиотек
      +1
      Так ведь Мэджик Гудди обязаны :)
        +8
        Какого монстра-то вспомнили))
        +5

        Не заметил, кто автор перевода)
        Андрей, спрячь статью и вычитку сделай. Повсюду несогласованные конструкции, очень впечатление портит (

          +1
          В таком случае я — «машина»…
          Кто как, у меня перевод осуществляется по следующему принципу: открываю Google Translate, вставляю переводимый текст, рядом открыт оригинал статьи и в третьем окне конечный перевод.

          Далее, смотрю на оригинал и перевожу сам. Если где-то возникает проблема — смотрю в переводчик, понимаю суть сказанного и далее пишу сам в человеко-понятной форме. Конкретно из переводчика здесь ни одной буквы не скопировано — полностью весь текст, вплоть до каждого знака препинания, писал вручную.
            0

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

              0
              В основном, публикую статью на третий день после последней правки.
              Таким образом, первые два дня текст исправляю множество раз, а здесь сплошал и сразу после перевода выложил не подумав(
              +1
              Ну да :)
              Знаете, как я определяю, что человек пользовался онлайн-переводчиком без, либо с минимальным ручным участием? Вот так:
              Раннее, лог содержал “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]”.

              Раньше, лог содержал “success callback” then “after binding”. Теперь будет иметь вид “after binding” and then “success callback”.


              Обратите внимание на не переведённые куски. Тот, кто полагается на машину без вычитки всегда оставляет такой след :) Проверено неоднократно.
            0
            Спасибо, поправил.

            Смотрю на рейтинг и в голову одна мысль приходит: «Хочешь понизить свой рейтинг на Хабре? Опубликуй перевод статьи.» :)
              +1
              Тот самый случай, когда на английском читается намного легче чем на русском — такое множество косяков, что спотыкаешься постоянно :(
              +4

              После заметки возникает вопрос: и это всё?!


              В оригинале еще ChangeLog, а там много вкусного.

                +11
                тот самый момент, когда пользуешься 1.х, а тут уже 3.0 выходит :(
                  +9
                  … и думаешь, но вот, хорошо что с переходом на 2.х не заморачивался )))
                    +1
                    Так и до 4.0 дожить можно ><
                      +1
                      Кажется мне, 4.0 не будет.
                      Если посмотреть на jQuery как на нишу, на мой взгляд, она начала отмирать (постепенно уменьшаться, если угодно) с приходом Babel.
                        +3
                        Пожалуйста поясните как именно Babel вытесняет jQuery?
                        Вроде бы совершенно разные вещи с совершенно разными задачами, и я не представляю какие именно задачи, решаемые jQuery, может выполнять Babel (и похоже делать это лучше)
                          0
                          У меня в окружении jQuery кажется остался только у тех, кто использует TWBS, который от него зависит, у всех остальных Angular, React и прочие фронты
                            0
                            Даже в «нативных» туториалах по React+Redux используют jQuery.
                            +1
                            Действительно, не совсем очевидное сравнение.
                            Под «нишей» я имел в виду две вещи (которые, на мой взгляд, являются основной причиной использования jQuery):
                            — упрощённый синтаксис (в сравнении с чистым JS) и увеличеная лаконичность кода
                            — один код — работает везде, кроссбраузерная совместимость

                            С приходом ES2015 чистый JS стал проще и лаконичнее, а Babel компилятор + полифиллы позволяют писать один код, который работает везде. Ну чем не замена jQuery? И давайте не будем про IE8…

                            Можно сказать, что jQuery будет жить из-за зоопарка плагинов, которого нет на чистом JS. Но это лишь вопрос времени, хотя и за последний год работы, у меня не было проблем найти нужный плагин/UI-компонент/библиотеку без зависимости от jQuery.
                            Как ниже верно подметили, jQuery жив благодаря Bootstrap и, возможно, благодаря Foundation.
                              +1
                              Скорее основная причина использования jQuery — упрощенный и кроссбраузерный синтаксис работы с DOM и прочими HTML API. К версии языка (ES5 или ES2015) это мало отношения имеет, скорее всего в обозримом будущем сам jQuery будет переписан на ES2015, не лишаясь своих преимуществ.
                    +4
                    и имеющим одинаковую подпись

                    signature это не подпись, это сигнатура. Список в конце забыли перевести? Перевод читается трудно, т.к., видимо, был сделан без понимания сути.
                      +1

                      Дизайн → jQuery 3.0 Final Released перевод
                      Интерфейсы, Графический дизайн, Веб-дизайн


                      М?

                        0
                        Просто статью писал бекендщик.
                          0
                          Не писал, а переводил ;)
                        0
                        Спасибо, поглядим как оно зайдёт. 2-х пропустили, может хоть на тройку перелезем :)
                          +2
                          Можно поинтересоваться, почему оставались на первой?
                            +1
                            Нужны были старые IE, я насколько помню это же основное отличие ветки 2.x было — вырезанная поддержка IE <=9
                            Сейчас поддерживаемую версию IE подняли, так что можно попробовать
                          –2
                          тонкая версия на целых 6 Кб меньше обычной — 23.6к против 30к.

                          Чуть не поперхнулся. Исправьте размер библиотек пожалуйста.
                            –1
                            Данный размер указан в оригинальном тексте. Здесь только его перевод, не более.

                            К тому же, если читать внимательнее, столько весит «тонкая» версия jQuery с отключенными модулями.
                              0
                              Скачайте тонкую версию и убедитесь в том, что она и правда тоньше. 68kb против 86kb
                                –1
                                Действительно. Ну ладно. Текст переведен с оригинала без изменения каких-либо данных.
                                  +5
                                  slim build is about 6k gzipped bytes smaller than the regular version
                              +1
                              >> Использование requestAnimationFram несколько лет назад создало

                              упустил последнюю букву в requestAnimationFrame

                              спасибо за перевод :)
                                0
                                Спасибо за исправления)
                                –2
                                Я так понял основное преимущество в том что сделали библиотеку легче на пару килобайт и пофиксили некоторые баги… Хотелось бы большего конечно, функций там новых каких нибудь. Или модернизации старых функций. Например чтобы animate() работал через transform а не через margin.
                                  +2
                                  Основное преимущество в том, что они удалили устаревшие методы, отрефакторили существующие и добавили много новых функций.

                                  Как упоминалось выше, руководство по апгрейду теперь доступно всем, кто желает использовать эту версию. Помимо основной инструкции по апгрейду, оно также включает в себя более подробное описание остальных изменений.

                                Only users with full accounts can post comments. Log in, please.