Vad är nytt i jQuery 3 - 10 Coolest Features

jQuery 3.0, släpptes den nya stora versionen av jQuery äntligen. Webbutvecklargemenskapen väntade på detta viktiga steg sedan oktober 2014, när jQuery-teamet började arbeta med den nya huvudversionen fram till nu, juni 2016, när slutlig utgåva är ute.

Utgivningsnoten lovar a smalare och snabbare jQuery, med bakåtkompatibilitet i åtanke. I det här inlägget tittar vi på några av de nya funktionerna i jQuery 3.0 för att ge dig en överblick över hur det ändrar JavaScript-landskapet.

Var ska man börja

Om du vill ladda ner jQuery 3.0 för att experimentera för dig själv, gå direkt till hämtningssidan. Det är också värt att ta en titt på uppgraderingsguiden eller källkoden.

Om du vill testa hur ditt befintliga projekt fungerar med jQuery 3.0 kan du prova på jQuery Migrera plugin som identifierar kompatibilitetsproblem i din kod. Du kan också ta en titt på framtida milstolpar.

Den här artikeln täcker inte Allt De nya funktionerna i jQuery 3.0, bara de mer intressanta: bättre kodkvalitet, integration av nya ECMAScript 6-funktioner, ett nytt API för animeringar, en ny metod för att flyga strängar, ökat SVG-stöd, förbättrade async-återkopplingar, bättre kompatibilitet med lyhörda platser , och ökad säkerhet.

1. Gamla IE-lösningar har tagits bort

Ett av huvudmålen för den nya stora utgåvan var att göra det snabbare och snyggare, Därför är de gamla hackarna och lösningarna relaterade till IE9- har tagits bort. Det betyder att om du vill eller behöver stödja IE6-8 måste du fortsätta använda det senaste 1,12 släpp ut, som till och med 2.x serien har inte fullt stöd för äldre Internet Explorer (IE9-). Kolla in anteckningarna om webbläsarsupport i dokumenten.

Observera att det också finns många avlägsna funktioner i jQuery 3. En stor brist i uppgraderingsguiden är att de avvecklade funktionerna - från och med juni 2016 - inte är grupperade, så om du är intresserad av dem, måste du kolla upp dem med webbläsarens sökverktyg ( ctrl + F).

2. jQuery 3.0 körs i strikt läge

Eftersom de flesta webbläsare som stöds av jQuery 3 stöder strikt läge har den nya stora versionen byggts med detta direktiv i åtanke.

Även om jQuery 3 har skrivits i strikt läge är det viktigt att veta det Din kod behöver inte köras i strikt läge, så du behöver inte skriva om Din befintliga jQuery-kod om du vill migrera till jQuery 3. Strikt och icke-strikt läge JavaScript kan gärna samexistera.

Det finns ett undantag: vissa versioner av ASP.NET som - på grund av det strikta läget - är inte kompatibel med jQuery 3. Om du är inblandad i ASP.NET kan du titta på detaljerna här i dokumenten.

3. För ... av Loops introduceras

jQuery 3 stöder för ... av uttalandet, en ny typ av för loop, introducerad i ECMAScript 6. Det ger ett enklare sätt att slinga över iterbara föremål, som arrangemang, kartor och uppsättningar.

I jQuery, the för av loop kan ersätta den tidigare $ .each (...) syntax och kan göra det lättare att gå igenom elementen i en jQuery-samling.

Observera att för av slingvilja Bara arbete antingen i en miljö som stöder ECMAScript 6, eller om du använd en JavaScript-kompilator som Babel.

4. Animationer Fick ett nytt API

jQuery 3 använder API för requestAnimationFrame () för att utföra animeringar, vilket gör animeringar springa mjukare och snabbare. Det nya API används bara i webbläsare som stöder det. för äldre webbläsare (dvs IE9) jQuery använder sitt tidigare API som en återgångsmetod för att visa animeringar.

RequestAnimationFrame har varit ute en stund, om du är intresserad av vad den vet eller varför du ska använda den, har CSS Tricks ett bra inlägg om det.

5. Ny metod för att flyga strängar med speciell betydelse

Den nya jQuery.escapeSelector () Metoden låter dig flyga strängar eller tecken som menar något annat i CSS för att kunna använd den i en jQuery-väljare; utan att flyga JavaScript kan tolken inte förstå det ordentligt.

Dokumenten hjälper oss att förstå denna metod bättre med följande exempel:

“Till exempel, om ett element på sidan har ett ID på “abc.def” det kan inte väljas med $ ("# abc.def") eftersom väljaren analyseras som “ett element med id 'abc' det har också en klass 'Def'. Det kan dock väljas med $ ("#" + $ .escapeSelector ("abc.def")).”

Jag är inte säker på hur ofta ett sådant fall händer, men om du stöter på ett sådant problem, har du nu en enkel lösning för att snabbt fixa det.

6. Klasshanteringsmetoder Stöd SVG

Tyvärr är jQuery 3 fortfarande stöder inte SVG fullständigt, men jQuery-metoderna som hanterar CSS-klassnamn, till exempel .addClass () och .hasClass (), Nu kan det vara van att rikta SVG-dokument också. Det betyder att du kan ändra (lägga till, ta bort, växla) eller hitta klasser med jQuery i skalbar vektorgrafik, klassera sedan klasserna med CSS.

7. Uppskjutna objekt är nu kompatibla med JS-löften

JavaScript-löften - objekt som används för asynkrona beräkningar - har standardiserats i ECMAScript 6; deras beteende och egenskaper anges i Promises / A + -standarden.

I jQuery 3, Uppskjutna objekt har blivit kompatibla med de nya Promises / A + -standarderna. Uppskjutna är kedjbara objekt som gör det möjligt att skapa återuppringningsköer.

Den nya funktionen ändras hur asynkrona återuppringningsfunktioner exekveras; Löften tillåta utvecklare att skriva asynkron kod som ligger närmare i logik till synkron kod.

Se kodexempel från uppgraderingsguiden eller titta på den här fantastiska Scotch.io-handledningen om grunderna för JavaScript-löften.

8. jQuery.when () tolkar flera argumenter annorlunda

De $ .När () Metod ger ett sätt att exekvera återuppringningsfunktioner. Det är en del av jQuery sedan version 1.5. Det är en flexibel metod; det fungerar också med nollargument, och det kan acceptera ett eller flera objekt som argument också.

jQuery 3 ändrar sättet hur argumenten av $ .När () tolkas när de innehåller $ .Då () metod med vilken du kan vidarebefordra ytterligare återuppringningar som argument till $ .När () metod.

I jQuery 3, om du lägger till ett inmatningsargument med sedan() metod till $ .När (), Argumentet kommer att vara tolkas som en löfte-kompatibel "därefter".

Det betyder att $ .När Metoden kommer att kunna acceptera ett gränssnitt av ingångar, som inbyggda ES6-löften och Bluebird-löften, som gör det möjligt att skriva mer sofistikerade asynkrona återuppringningar.

9. Ny Visa / Dölj Logik

För att öka kompatibilitet med lyhörd design, koden relaterade till visar och gömmer element har uppdaterats i jQuery 3.

Från och med nu, den .show(), .Dölj(), och .toggle () metoder kommer att fokusera på inline-stilar, istället för beräknade stilar, så här kommer de bättre respekt stilark förändras.

Den nya koden respekterar visa värden av stylesheets närhelst det är möjligt, vilket innebär att CSS-regler kan dynamiskt förändras vid händelser som enhetens omorientering och fönsterändring.

Dokumenterna hävdar att det viktigaste resultatet kommer att vara:

"Som ett resultat är bortkopplade element anses inte längre som dold om inte de har inline display: none;, och därför .toggle () kommer inte längre skilja dem från anslutna element från jQuery 3.0. "

Om du vill förstå Resultat av den nya showen / döljlogiken, här är en intressant Github diskussion om det.

jQuery-utvecklare publicerade också ett Google Docs-tabellen om hur det nya beteendet kommer att fungera i olika användningsfall.

10. Extra skydd mot XSS Attacks

jQuery 3 tillagd ett extra säkerhetslager mot XSS-attacker genom att kräva att utvecklare anger dataType: "script" i alternativen av $ .Ajax () och den $ .Skaffa () metoder.

Med andra ord, om du vill utföra skriptförfrågningar med flera domäner, ska du måste deklarera detta i inställningarna för dessa metoder.

Enligt dokumenten är det nya kravet användbart när en "fjärrplats levererar icke-skript innehåll men beslutar sig senare servera ett skript som har skadlig avsikt"Ändringen påverkar inte $ .GetScript () metod, som den anger dataType: "script" alternativet uttryckligen.