Домашняя » кодирование » Что нового в jQuery 3 - 10 крутых возможностей

    Что нового в jQuery 3 - 10 крутых возможностей

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

    Примечание к выпуску обещает стройнее и быстрее 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 Docs: поддержка браузера

    Обратите внимание, что есть также много устаревших функций в jQuery 3. Большим недостатком Руководства по обновлению является то, что устаревшие функции - по состоянию на июнь 2016 года - не сгруппированы, поэтому, если они вам интересны, вам нужно будет найти их с помощью инструмента поиска вашего браузера ( Ctrl + F).

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

    2. jQuery 3.0 работает в строгом режиме

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

    Хотя jQuery 3 написан в строгом режиме, важно знать, что Ваш код не требуется для запуска в строгом режиме, так что вы не нужно переписывать существующий код jQuery, если вы хотите перейти на jQuery 3. Строгий и нестрогий режим JavaScript может счастливо сосуществовать.

    Есть одно исключение: некоторые версии ASP.NET что из-за строгого режима не совместим с jQuery 3. Если вы связаны с ASP.NET, вы можете взглянуть на детали здесь в документации.

    3. Для… Вводится

    jQuery 3 поддерживает for… of Statement, новый вид за цикл, введенный в ECMAScript 6. Это дает более простой способ цикл по итерируемым объектам, такие как массивы, карты и наборы.

    В jQuery для ... из петля может заменить прежнюю $ .each (…) синтаксис, и может упростить цикл по элементам коллекции jQuery.

    Пример кода из руководства по обновлению

    Обратите внимание, что для ... из цикл будет Единственная работа либо в среде, которая поддерживает ECMAScript 6, или если вы использовать компилятор JavaScript такие как Вавилон.

    4. Анимации получили новый API

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

    RequestAnimationFrame Уже давно, если вы заинтересованы в том, что он знает или почему вы должны его использовать, у CSS Tricks есть хороший пост об этом.

    www.caniuse.com

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

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

    Документы помогают нам лучше понять этот метод на следующем примере:

    Например, если элемент на странице имеет идентификатор “abc.def” его нельзя выбрать с помощью $ ("# abc.def") потому что селектор анализируется как “элемент с идентификатором 'ABC' это также имеет класс «Защита». Тем не менее, он может быть выбран с $ ("#" + $ .escapeSelector ("abc.def")).”

    Я не уверен, как часто такое случается, но если вы столкнетесь с такой проблемой, теперь у вас есть простой способ быстро ее исправить.

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

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

    7. Отложенные объекты теперь совместимы с обещаниями JS

    Обещания JavaScript - используемые объекты для асинхронных вычислений - были стандартизированы в ECMAScript 6; их поведение и особенности указаны в стандартах Promises / A +.

    В jQuery 3, Отложенные объекты совместимы с новыми стандартами Promises / A +. Отложенные цепные объекты которые позволяют создавать очереди обратного вызова.

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

    Посмотрите примеры кода из Руководства по обновлению или посмотрите этот великолепный учебник Scotch.io об основах обещаний JavaScript.

    8. jQuery.when () по-разному интерпретирует несколько аргументов

    $ .When () метод обеспечивает способ выполнять функции обратного вызова. Это часть jQuery начиная с версии 1.5. Это гибкий метод; он также работает с нулевыми аргументами и может принимать один или несколько объектов в качестве аргументов..

    JQuery 3 меняет способ, которым аргументы $ .When () интерпретируются когда они содержат $ .Then () метод с помощью которого вы можете передать дополнительные обратные вызовы в качестве аргументов $ .When () метод.

    api.jquery.com

    В jQuery 3, если вы добавите входной аргумент с затем() метод для $ .When (), аргумент будет интерпретируется как Promise-совместимый "thenable".

    Это означает, что $ .when метод сможет принять границы диапазона входов, такие как встроенные обещания ES6 и обещания Bluebird, что позволяет писать более сложные асинхронные обратные вызовы.

    9. Новое Показать / Скрыть Логику

    Чтобы увеличить совместимость с адаптивным дизайном, код, связанный с показ и скрытие элементов был обновлен в jQuery 3.

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

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

    В документах утверждается, что наиболее важным результатом будет:

    «В результате отключенные элементы больше не считается скрытым если у них нет встроенного дисплей: нет;, и поэтому .Переключатель () будут больше не дифференцировать их из связанных элементов, начиная с jQuery 3.0. "

    Если вы хотите лучше понять результаты новой логики "показать / скрыть", вот интересное обсуждение Github об этом.

    Разработчики jQuery также опубликовали таблицу Google Docs о том, как будет работать новое поведение. в разных случаях использования.

    10. Дополнительная защита от атак XSS

    jQuery 3 добавлено дополнительный уровень безопасности против атак на межсайтовый скриптинг (XSS), требуя от разработчиков указания dataType: "скрипт" в вариантах $ .Ajax () и $ .Get () методы.

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

    Слайдшер от Эндрю Керра: межсайтовый скриптинг (слайд 17)

    Согласно документам, новое требование полезно, когда «удаленный сайт» доставляет не сценарий но позже решает служить сценарию, который имеет злой умысел". Изменение не влияет на $ .GetScript () метод, так как он устанавливает dataType: "скрипт" вариант явно.