10 классных функций в jQuery 3

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

Release Note обещает более тонкий и быстрый 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).
Руководство по обновлению jQuery2. jQuery 3.0 работает в строгом режиме
Как большинство браузеров, поддерживаемых jQuery 3, поддерживают строгий режимновая основная версия была создана с учетом этой директивы.

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

Есть одно исключение: некоторые версии ASP.NET, которые из-за строгого режима не совместимы с jQuery 3. Если вы работаете с ASP.NET, вы можете взглянуть на детали здесь, в документах,
3. Для… Вводится
JQuery 3 поддерживает для … из оператор, новый вид цикла for, введенный в ECMAScript 6. Он предоставляет более простой способ зацикливания итерируемых объектов, таких как Массивы, Карты, а также наборы,

В jQuery цикл for … может заменить первый $ .Each (…) синтаксис, и может упростить цикл по элементам Коллекция jQuery,
Пример кода из руководства по обновлениюОбратите внимание, что цикл for … of будет работать только в среде, которая поддерживает ECMAScript 6, или если вы используете компилятор JavaScript, такой как галдеж,
4. Анимации получили новый API
JQuery 3 использует API requestAnimationFrame () для выполнения анимации, чтобы анимации работали плавнее и быстрее. Новый API используется только в браузеры, которые его поддерживают; для более старых браузеров (например, IE9) jQuery использует свой предыдущий API в качестве запасного метода для отображения анимации.

RequestAnimationFrame уже давно отсутствует, если вам интересно, что он знает или зачем его использовать, у CSS Tricks есть хороший пост об этом.
www.caniuse.com5. Новый метод экранирования строк с особым значением
Новый метод jQuery.escapeSelector () позволяет вам избегать строк или символов, которые означают что-то другое в CSS, чтобы иметь возможность использовать его в селекторе jQuery; без выхода из интерпретатора JavaScript не может правильно понять это.

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

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

Я не уверен, как часто такое случается, но если вы столкнетесь с такой проблемой, теперь у вас есть простой способ быстро ее исправить.
6. Поддержка методов управления классами SVG
К сожалению, jQuery 3 все еще не полностью поддерживает SVG, но методы jQuery, которые манипулировать именами CSS-классов, такие как .addClass () а также .hasClass (), теперь можно использовать и для документов SVG. Это означает, что вы можете изменить (добавить, удалить, переключить) или найти классы с помощью jQuery в Scalable Vector Graphics, а затем стилизовать классы с помощью CSS.

  1. Отложенные объекты теперь совместимы с обещаниями JS
    JavaScript обещания – объекты, используемые для асинхронных вычислений – стандартизированы в ECMAScript 6; их поведение и особенности указаны в Обещания / А + стандарты.

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

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

Видеть примеры кода из руководства по обновлению или, посмотрите на это великое Scotch.io учебник об основах обещаний JavaScript.
8. jQuery.when () по-разному интерпретирует аргументы
$ .When () Метод предоставляет способ выполнения функций обратного вызова. Это часть jQuery начиная с версии 1.5. Это гибкий метод; он также работает с нулевыми аргументами и может принимать один или несколько объектов в качестве аргументов.

jQuery 3 изменяет способ интерпретации аргументов $ .when (), когда они содержат $ .Then () метод, с помощью которого вы можете передавать дополнительные обратные вызовы в качестве аргументов в метод $ .when ().
api.jquery.comВ jQuery 3, если вы добавите входной аргумент с помощью метода then () к $ .when (), этот аргумент будет интерпретирован как Promise-совместимый “Thenable”,

Это означает, что метод $ .when сможет принимать более широкий диапазон входных данных, например, нативный ES6 Promises а также Обещания Синей птицы, что позволяет писать более сложные асинхронные обратные вызовы.
9. Новое Показать / Скрыть Логику
Чтобы повысить совместимость с адаптивным дизайном, в jQuery 3 был обновлен код, связанный с отображением и скрытием элементов.

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

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

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

«В результате отключенные элементы больше не считаются скрытыми, если они не имеют встроенного отображения: нет; и, следовательно, .toggle () больше не будет отличать их от связанных элементов с jQuery 3.0».

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

Разработчики jQuery также опубликовали Таблица Google Документов о том, как новое поведение будет работать в разных случаях использования.
10. Дополнительная защита от атак XSS
JQuery 3 добавил дополнительный уровень безопасности против Межсайтовый скриптинг (XSS) атак, требуя от разработчиков указать dataType: “script” в опциях $ .Ajax () и $ .Get () методы.

Другими словами, если вы хотите выполнять междоменные запросы скриптов, вы должны объявить это в настройках этих методов.
Slideshare от Эндрю Керра: межсайтовый скриптинг (слайд 17)Согласно документам, новое требование полезно, когда «удаленный сайт доставляет содержимое, не относящееся к сценарию, но позднее решает передать сценарий со злонамеренным намерением». Изменение не влияет на $ .GetScript () метод, поскольку он явно устанавливает параметр dataType: “script”.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *