Начална » кодиране на стоките » What's New in jQuery 3 - 10 най-готините функции

    What's New in jQuery 3 - 10 най-готините функции

    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 Docs: Поддръжка на браузър

    Имайте предвид, че има и такива много отхвърлени функции в jQuery 3. Голям недостатък на Ръководството за надстройка е, че отхвърлените функции - от юни 2016 г. - не са групирани, така че ако се интересувате от тях, ще трябва да ги потърсите с инструмента за търсене на браузъра си ( Ctrl + F).

    jQuery Ръководство за надстройка

    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 компилатор като Babel.

    4. Анимации Имам нов API

    jQuery 3 използва API за requestAnimationFrame () за изпълнение на анимации, анимации тичам по-гладко и по-бързо. Новият API се използва само в браузъри, които го поддържат; за по-стари браузъри (т.е. IE9) jQuery използва предишния си API като резервен метод за показване на анимации.

    RequestAnimationFrame е изтекъл известно време, ако се интересувате от това, което той знае или защо трябва да го използвате, CSS Tricks има добра публикация за него.

    www.caniuse.com

    5. Нов метод за избягване на струни със специално значение

    Новото jQuery.escapeSelector () Методът ви позволява да избягвате низове или символи означава нещо друго в CSS за да може използвайте го в jQuery-selector; без избягване на интерпретатора на JavaScript не може да го разбере правилно.

    Документите ни помагат да разберем по-добре този метод със следния пример:

    Например, ако елемент на страницата има идентификатор на “а б В Г Д Е” тя не може да бъде избрана с $ ("# abc.def") защото селекторът се анализира като “елемент с id "ABC" който също има клас "Дефиниция". Въпреки това, той може да бъде избран с $ ("#" + $ .escapeSelector ("abc.def")).”

    Не съм сигурен колко често се случва такъв случай, но ако се натъкнете на проблем като този, сега имате лесен начин бързо да го поправите.

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

    За съжаление, jQuery 3 все още не поддържа изцяло SVG, но методите jQuery, които манипулират имена на CSS класове, като например .addClass () и .hasClass (), сега може да се използва за целеви SVG документи също. Това означава, че можете да модифицирате (добавяте, премахвате, превключвате) или да намерите класове с jQuery в Scalable Vector Graphics, след това стилизирайте класовете с CSS.

    7. Отложените обекти сега са съвместими с JS Promises

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

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

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

    Вижте примери за кодове от Ръководството за надстройка или вижте този урок за Scotch.io за основите на JavaScript обещанията.

    8. jQuery.when () Интерпретира различни аргументи по различен начин

    Най- $ .При () Методът осигурява начин за това изпълнява функции за обратно извикване. Това е част от jQuery от версия 1.5. Това е гъвкав метод; той също работи с нулеви аргументи и може да приеме един или повече обекти като аргументи.

    jQuery 3 променя начина, по който аргументите на $ .При () се тълкуват когато съдържат $ .След това () метод с които можете да предавате допълнителни обратни обаждания като аргументи на $ .При () метод.

    api.jquery.com

    В jQuery 3, ако добавите входен аргумент с тогава() метод $ .При (), аргументът ще бъде тълкуван като съвместим с Promise.

    Това означава, че $ .При метод приемете гама от входни данни, като родните ES6 обещания и обещанията на Bluebird, което прави възможно да се пишат по-сложни асинхронни обратни обаждания.

    9. New Show / Hide Logic

    За да се увеличи съвместимост с отзивчив дизайн, кода, свързан с показва и скрива елементи е актуализиран в jQuery 3.

    От сега нататък .шоу (), .Крия(), и .превключване () методите ще се фокусират върху вградени стилове, вместо изчислени стилове, така ще го направят по-добро спазване на промените в стиловете.

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

    Документите твърдят, че най-важният резултат ще бъде:

    "В резултат на това са изключени елементи вече не се счита за скрит освен ако не са вградени дисплей: няма;, и следователно .превключване () ще вече не ги разграничаваме от свързани елементи от jQuery 3.0. "

    Ако искате да разберете по-добре резултатите от новата логика за показване / скриване, Ето една интересна дискусия на Github за това.

    Разработчиците на jQuery публикуваха и таблица на Google Документи за това как ще работи новото поведение в различни случаи на употреба.

    10. Допълнителна защита срещу XSS атаки

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

    С други думи, ако искате да изпълнявате заявки за междудомейнни скриптове, вие трябва да декларира това в настройките на тези методи.

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

    Според документите, новото изискване е полезно, когато "отдалечен сайт." доставя съдържание без скрипт но по-късно решава служат на скрипт, който има злонамерени намеренияПромяната не засяга. \ T $ .GetScript () метод, тъй като той определя dataType: "script" опция.