Hvad er nyt i jQuery 3 - 10 fedeste funktioner

jQuery 3.0, blev den nye store udgivelse af jQuery endelig udgivet. Webudvikler-fællesskabet ventede på dette vigtige skridt siden oktober 2014, da jQuery-teamet begyndte at arbejde på den nye hovedversion indtil nu, juni 2016, da endelig udgivelse er ude.

Udgivelsesnoten lover a slankere og hurtigere jQuery, med bagudkompatibilitet i tankerne. I dette indlæg kigger vi på nogle af de nye funktioner i jQuery 3.0 for at give dig et overblik over, hvordan det ændrer JavaScript-landskabet.

Hvor skal man starte

Hvis du vil downloade jQuery 3.0 for at eksperimentere for dig selv, skal du gå direkte til download siden. Det er også værd at tage et kig på opgraderingsguiden eller kildekoden.

Hvis du vil teste, hvordan dit eksisterende projekt fungerer sammen med jQuery 3.0, kan du prøve et jQuery-migreringsprogram, der identificerer kompatibilitetsproblemer i din kode. Du kan også tage et kig på fremtidige milepæle.

Denne artikel dækker ikke alle De nye funktioner i jQuery 3.0, kun de mere interessante: bedre kodekvalitet, integration af nye ECMAScript 6-funktioner, en ny API til animationer, en ny metode til at undslippe strenge, øget SVG-support, forbedrede async-tilbagekald, bedre kompatibilitet med lydhør , og øget sikkerhed.

1. Gamle IE-løsninger blev fjernet

Et af hovedmålene for den nye store udgivelse var at gøre det hurtigere og slankere, Derfor er de gamle hacks og løsninger i forbindelse med IE9- blev fjernet. Dette betyder, at hvis du vil eller skal understøtte IE6-8, skal du fortsætte med at bruge det nyeste 1.12 frigive, som selv den 2.x serier har ikke fuld støtte til ældre Internet Explorer (IE9-). Tjek noterne om browser support i docs.

Bemærk at der også er mange forældede funktioner i jQuery 3. En stor mangel på opgraderingsguiden er, at de udskrevne funktioner - fra juni 2016 - ikke er grupperet, så hvis du er interesseret i dem, skal du se dem op med browsers søgeværktøj ( Ctrl + F).

2. jQuery 3.0 kører i streng tilstand

Da de fleste browsere understøttet af jQuery 3 understøtter strenge tilstand, er den nye store udgivelse blevet bygget med dette direktiv i tankerne.

Selv om jQuery 3 er skrevet i streng tilstand, er det vigtigt at vide det din kode er ikke forpligtet til at køre i streng tilstand, så dig behøver ikke at omskrive Din eksisterende jQuery-kode, hvis du vil overføre til jQuery 3. Strenge og ikke-streng tilstand JavaScript kan lykkeligt eksistere sammen.

Der er en undtagelse: nogle versioner af ASP.NET som - på grund af den strenge tilstand - er ikke kompatibel med jQuery 3. Hvis du er involveret i ASP.NET, kan du kigge på detaljerne her i docs.

3. For ... af Loops er introduceret

jQuery 3 understøtter for ... af erklæring, en ny slags til loop, introduceret i ECMAScript 6. Det giver en mere ligetil måde at loop over iterable objekter, såsom Arrays, Maps og Sets.

I jQuery, den for ... af loop kan erstatte den tidligere $ .each (...) syntaks og kan gøre det nemmere at gennemgå elementerne i en jQuery-samling.

Bemærk at for ... af loop vilje kun arbejde enten i et miljø som understøtter ECMAScript 6, eller hvis du brug en JavaScript compiler såsom Babel.

4. Animationer Fik en ny API

jQuery 3 bruger API'en requestAnimationFrame () til at udføre animationer og lave animationer Kør glattere og hurtigere. Den nye API bruges kun i browsere, der understøtter det; for ældre browsere (dvs. IE9) jQuery bruger sin tidligere API som en tilbagesendelsesmetode til at vise animationer.

RequestAnimationFrame har været ude i et stykke tid, hvis du er interesseret i hvad den ved eller hvorfor du skal bruge det, har CSS Tricks et godt indlæg om det.

5. Ny metode til at undslippe strings med særlig betydning

Den nye jQuery.escapeSelector () Metode giver dig mulighed for at undslippe strenge eller tegn som betyder noget andet i CSS for at kunne brug det i en jQuery-vælger; JavaScript-fortolkeren kan ikke forstå det korrekt uden at flygte.

Dokumenterne hjælper os med at forstå denne metode bedre med følgende eksempel:

“For eksempel, hvis et element på siden har et id på “abc.def” det kan ikke vælges med $ ("# abc.def") fordi vælgeren parses som “et element med id 'Abc' det har også en klasse 'Def'. Det kan dog vælges med $ ("#" + $ .escapeSelector ("abc.def")).”

Jeg er ikke sikker på, hvor ofte sådan en sag sker, men hvis du støder på et problem som dette, har du nu en nem måde at hurtigt rette op på.

6. Klassifikationsmetoder Støtte SVG

Desværre er jQuery 3 stadig støtter ikke SVG fuldt ud, men jQuery-metoderne, der manipulerer CSS-klassenavne, f.eks .addClass () og .hasClass (), Nu kan det bruges til målrette SVG-dokumenter såvel. Det betyder, at du kan ændre (tilføj, fjerne, skifte) eller finde klasser med jQuery i skalerbar vektorgrafik, klasser derefter klasserne med CSS.

7. Udskudte objekter er nu kompatible med JS løfter

JavaScript løfter - objekter brugt til asynkrone beregninger - er blevet standardiseret i ECMAScript 6; deres adfærd og funktioner er angivet i løfterne / a + -standarderne.

I jQuery 3, Udskudte objekter er blevet gjort kompatible med de nye Promises / A + standarder. Udskudt er kædelige genstande det gør det muligt at oprette tilbagekaldskøer.

Den nye funktion ændres hvordan asynkrone tilbagekaldsfunktioner udføres; Promises tillade udviklere at skrive asynkron kode, der er tættere på logik til synkron kode.

Se kodeeksempler fra opgraderingsguiden, eller kig på denne fantastiske Scotch.io vejledning om det grundlæggende i JavaScript-løfter..

8. jQuery.when () Interpreterer flere argumenter forskelligt

Det $ .Når () metode giver en måde at udføre tilbagekaldsfunktioner. Det er en del af jQuery siden version 1.5. Det er en fleksibel metode; det virker også med nul argumenter, og det kan acceptere en eller flere objekter som argumenter også.

jQuery 3 ændrer måden, hvordan argumenter for $ .Når () fortolkes når de indeholder $ Ringing () metode med hvilken du kan videresende yderligere tilbagekaldelser som argumenter til $ .Når () metode.

I jQuery 3, hvis du tilføjer et input argument med derefter() metode til $ .Når (), argumentet vil være fortolket som en løfte-kompatibel "thenable".

Det betyder at $ .Når metode vil kunne acceptere et boarder udvalg af input, som f.eks. ES6-løfter og Bluebird-løfter, der gør det muligt at skrive mere sofistikerede asynkrone tilbagekaldelser.

9. Ny Vis / Skjul Logik

For at øge kompatibilitet med lydhør design, koden relateret til viser og gemmer elementer er blevet opdateret i jQuery 3.

Fra nu af er .at vise(), .skjule(), og .toggle () metoder vil fokusere på inline stilarter, i stedet for beregnede stilarter, sådan vil de bedre respekt stilark ændres.

Den nye kode respekterer Skærm værdier af stylesheets, når det er muligt, hvilket betyder at CSS-regler kan dynamisk forandring ved begivenheder som enhedens omorientering og vinduets størrelse.

Dokumenterne hævder, at det vigtigste resultat vil være:

"Som følge heraf er frakoblede elementer betragtes ikke længere som skjult medmindre de har inline display: none;, og derfor .toggle () vilje ikke længere skelne dem fra tilsluttede elementer fra jQuery 3.0. "

Hvis du vil forstå det bedre Resultater af den nye show / hide logic, her er en interessant Github diskussion om det.

jQuery-udviklere udgav også et Google Docs-bord om, hvordan den nye adfærd vil fungere i forskellige brugssager.

10. Ekstra beskyttelse mod XSS Attacks

jQuery 3 tilføjet et ekstra sikkerhedslag imod cross-site scripting (XSS) angreb ved at kræve udviklere at specificere dataType: "script" i mulighederne for $ .Ajax () og $ .Få () metoder.

Med andre ord, hvis du vil udføre skriftlige forespørgsler på tværs af domæner, skal du skal erklære dette i indstillingerne af disse metoder.

Ifølge dokumenterne er det nye krav brugbart, når et "fjerntliggende websted leverer ikke-script indhold men senere beslutter at tjene et script, der har ondsindet hensigtMsgstr "Ændringen påvirker ikke $ .GetScript () metode, som det sætter dataType: "script" mulighed eksplicit.