Čo je nové v jQuery 3 - 10 najlepších funkcií

jQuery 3.0, nové vydanie jQuery konečne vydalo. Spoločnosť vývojárov webových stránok čakala tento dôležitý krok od októbra 2014, kedy tím jQuery začal pracovať na novej hlavnej verzii až do júna 2016, kedy konečné vydanie je vonku.

Sprievodný list sľubuje a štíhlejšie a rýchlejšie jQuery, s spätnej kompatibility na mysli. V tomto príspevku sa pozrieme na niektoré z nových funkcií jQuery 3.0, ktoré vám poskytnú prehľad o tom, ako sa zmenil jazyk JavaScript.

Kde začať

Ak chcete prevziať jQuery 3.0 a experimentovať sami, prejdite priamo na stránku sťahovania. Taktiež stojí za to pozrieť si sprievodcu inováciou alebo zdrojový kód.

Ak chcete otestovať, ako váš existujúci projekt funguje s jQuery 3.0, môžete skúsiť plugin jQuery Migrate, ktorý identifikuje problémy s kompatibilitou v kóde. Môžete sa tiež pozrieť na budúce míľniky.

Tento článok sa nevzťahuje všetko nové funkcie jQuery 3.0, len tie zaujímavé: lepšia kvalita kódu, integrácia nových funkcií ECMAScript 6, nová API pre animácie, nová metóda úniku reťazcov, zvýšená podpora SVG, vylepšené spätné volania async, lepšia kompatibilita s citlivými stránkami , a zvýšená bezpečnosť.

1. Staré riešenie IE bolo odstránené

Jedným z hlavných cieľov nového hlavného vydania bolo dosiahnuť to rýchlejšie a hladšie, preto staré hacks a riešenia súvisiace s IE9- bolo odstránené. To znamená, že ak chcete alebo potrebujete podporovať IE6-8, budete musieť používať najnovšie 1.12 ako aj 2.x série nemajú plnú podporu pre starších prieskumníkov internetu (IE9-). Pozrite si poznámky k podpore prehliadača v dokumentoch.

Všimnite si, že existujú aj veľa zastaraných funkcií v jQuery 3. Veľkým nedostatkom príručky inovácií je to, že zastarané funkcie - od júna 2016 - nie sú zoskupené, takže ak ich máte záujem, musíte ich vyhľadávať pomocou vyhľadávacieho nástroja vášho prehliadača ( Ctrl + F).

2. jQuery 3.0 pracuje v striktnom režime

Keďže väčšina prehliadačov podporovaných v jQuery 3 podporuje prísny režim, nové hlavné vydanie bolo vytvorené na základe tejto smernice.

Hoci jQuery 3 je napísaný v striktnom režime, je dôležité vedieť, že váš kód sa nevyžaduje, aby fungoval v prísnom režime, takže ty nemusíte prepísať váš existujúci jQuery kód, ak chcete prejsť na jQuery 3. Strict & non-strict JavaScript môže šťastne koexistovať.

Existuje jedna výnimka: niektoré verzie ASP.NET že - kvôli prísnemu režimu - sú nie je kompatibilný s jQuery 3. Ak ste zapojení do ASP.NET, môžete sa pozrieť na detaily tu v dokumentoch.

3. Pre ... Loops je zavedený

jQuery 3 podporuje pre ... vyhlásenie, nový druh pre slučka zavedená v ECMAScript 6. Umožňuje jednoduchšiu cestu slučka cez iteračné objekty, ako napríklad polia, mapy a súbory.

V jQuery, pre ... z slučka môže nahradiť pôvodný $. každý (...) syntax a môže uľahčiť slučovanie prvkov kolekcie jQuery.

Všimnite si, že pre ... z slučka bude len pracovať buď v prostredí, ktoré podporuje ECMAScript 6, alebo ak ste vy použite kompilátor jazyka JavaScript ako napríklad Babel.

4. Animácie získali nový API

jQuery 3 používa rozhranie API requestAnimationFrame () na vykonávanie animácií a vytváranie animácií bežte hladšie a rýchlejšie. Nové rozhranie API sa používa iba v prehliadačoch, ktoré ho podporujú. pre staršie prehliadače (t. j. IE9) jQuery používa svoje predchádzajúce rozhranie API ako záložnú metódu na zobrazenie animácií.

RequestAnimationFrame bol na chvíľu, ak máte záujem o to, čo vie, alebo prečo by ste ho mali používať, CSS Tricks má dobrý príspevok o tom.

5. Nová metóda úniku reťazcov so špeciálnym významom

Nové jQuery.escapeSelector () metóda umožňuje uniknúť reťazcom alebo znakov, ktoré znamená niečo iné v CSS aby to bolo možné použite ho v jQuery-selector; bez toho aby unikol interpretátora jazyka JavaScript, nemôže správne pochopiť.

Dokumenty nám pomáhajú pochopiť túto metódu lepšie pomocou nasledujúceho príkladu:

“Napríklad, ak prvok na stránke má id “A b c d e f” nemožno ho vybrať $ ("# abc.def") pretože selektor je analyzovaný ako “prvok s ID 'Abc' že má aj triedu 'Def'. Môžete ho však vybrať $ ("#" + $ .escapeSelector ("abc.def")).”

Nie som si istý, ako často sa takýto prípad deje, ale ak narazíte na takýto problém, teraz máte jednoduchý spôsob, ako to rýchlo opraviť.

6. Metódy manipulácie s triedami Podpora SVG

Bohužiaľ, jQuery 3 stále nepodporuje SVG v plnom rozsahu, ale metódy jQuery, ktoré manipulujú s názvami tried CSS, ako napr .addClass () a .hasClass (), Teraz môžete použiť cieľové dokumenty SVG tiež. To znamená, že môžete upravovať (pridať, odstrániť, prepnúť) alebo nájsť triedy s jQuery v škálovateľnej vektorovej grafike, potom štýl tried s CSS.

7. Odložené objekty sú teraz kompatibilné s sľubmi JS

JavaScript sľuby - použité objekty pre asynchrónne výpočty - boli štandardizované v ECMAScript 6; ich správanie a funkcie sú špecifikované v štandardoch Promises / A +.

V jQuery 3, Odložené objekty boli zlučiteľné s novými normami Promises / A +. Odložené platby sú reťazové objekty ktoré to umožňujú vytvárať fronty spätného volania.

Nová funkcia sa zmení ako sa vykonávajú funkcie asynchrónneho spätného volania; Sľuby umožniť vývojárom napísať asynchrónny kód, ktorý je bližšie k logike synchrónneho kódu.

Pozrite si príklady kódov z Príručky inovácií alebo pozrite sa na tento skvelý náhľad na základy JavaScriptu.

8. jQuery.when () interpretuje rôzne argumenty inak

$ .Keď () metóda poskytuje spôsob, ako vykonať funkcie spätného volania. Je to súčasť jQuery od verzie 1.5. Je to flexibilná metóda; pracuje tiež s nulovými argumentmi a môže akceptovať jeden alebo viac objektov ako argumenty.

jQuery 3 mení spôsob, akým majú argumenty $ .Keď () sú interpretované keď obsahujú $ .Potom () metóda s ktorými môžete odovzdať ďalšie spätné volania ako argumenty $ .Keď () metóda.

V jQuery 3, ak pridáte vstupný argument s potom () metóda na $ .Keď (), argument bude interpretované ako "sľubné".

To znamená, že $ .Keď metóda bude môcť akceptuje hraničný rozsah vstupov, ako napríklad natívne sľuby ES6 a Bluebird Promises, ktoré umožňujú napísať sofistikovanejšie asynchrónne spätné volania.

9. Nová Zobraziť / Skryť logiku

S cieľom zvýšiť kompatibilita s citlivým dizajnom, kód súvisiaci s zobrazovanie a skrytie prvkov bola aktualizovaná v jQuery 3.

Odteraz sa .šou(), .skryť (), a .Prepínač () metódy sa zamerajú na inline štýly, namiesto vypočítaných štýlov, tak to urobia lepšie rešpektovať zmeny štýlových hárkov.

Nový kód rešpektuje zobraziť hodnoty štýlov, ak je to možné, čo znamená, že pravidlá CSS môžu dynamicky sa meniť po udalostiach, ako je zmena orientácie zariadenia a zmena veľkosti okna.

Dokumenty potvrdzujú, že najdôležitejším výsledkom bude:

"V dôsledku toho sú odpojené prvky už nie sú považované za skryté pokiaľ nie sú vložené zobrazenie: žiadne;, a preto .Prepínač () vôľa už ich nerozlišovať z pripojených prvkov od jQuery 3.0. "

Ak chcete lepšie porozumieť výsledky novej logiky zobrazovania / skrytia, tu je zaujímavá diskusia Github o tom.

Vývojári spoločnosti jQuery tiež publikovali tabuľku Dokumenty Google o tom, ako nové správanie bude fungovať v rôznych prípadoch použitia.

10. Ďalšia ochrana proti útokom XSS

pridané jQuery 3 dodatočná bezpečnostná vrstva proti útokom medzi lokalitami (XSS), ktoré vyžadujú, aby vývojári špecifikovali typ údajov: "skript" v možnostiach $ .Ajax () a $ .Get () metódy.

Inými slovami, ak chcete vykonať žiadosti o skriptovanie medzi doménami, vy musí to oznámiť v nastaveniach týchto metód.

Podľa dokumentov je nová požiadavka užitočná pri "vzdialenom mieste poskytuje obsah bez skriptov ale neskôr sa rozhodne zobraziť skript, ktorý má zákerné úmyslyZmena nemá vplyv na $ .GetScript () ako to nastavuje typ údajov: "skript" explicitne.