Hva er nytt i jQuery 3 - 10 kuleste funksjoner

jQuery 3.0, den nye store utgivelsen av jQuery ble endelig utgitt. Nettutvikler-fellesskapet ventet på dette viktige trinnet siden oktober 2014, da jQuery-teamet begynte å jobbe med den nye hovedversjonen frem til nå juni 2016 da endelig utgivelse er ute.

Utgivelsesnotatet lover a slankere og raskere jQuery, med bakoverkompatibilitet i tankene. I dette innlegget ser vi på noen av de nye funksjonene i jQuery 3.0 for å gi deg en oversikt over hvordan det endrer JavaScript-landskapet.

Hvor skal jeg starte

Hvis du vil laste ned jQuery 3.0 for å eksperimentere for deg selv, gå rett til nedlastingssiden. Det er også verdt å ta en titt på oppgraderingsguiden, eller kildekoden.

Hvis du vil teste hvordan ditt eksisterende prosjekt fungerer med jQuery 3.0, kan du prøve å jQuery Migrere plugin som identifiserer kompatibilitetsproblemer i koden din. Du kan også ta en titt på fremtidige milepæler.

Denne artikkelen dekker ikke alle De nye funksjonene til jQuery 3.0 er bare de mest interessante: bedre kodekvalitet, integrering av nye ECMAScript 6-funksjoner, en ny API for animasjoner, en ny metode for å rømme strenger, økt SVG-støtte, forbedret async-tilbakeringinger, bedre kompatibilitet med lydhørsteder , og økt sikkerhet.

1. Gamle IE-løsninger ble fjernet

Et av hovedmålene for den nye store utgivelsen var å gjøre det raskere og slankere, derfor de gamle hackene og løsningene knyttet til IE9- ble fjernet. Dette betyr at hvis du vil eller trenger å støtte IE6-8, må du fortsette å bruke det siste 1.12 slipp ut, som til og med 2.x serien har ikke full støtte for eldre Internet Explorer (IE9-). Sjekk ut notatene om nettleserstøtte i dokumentene.

Legg merke til at det også finnes mange utdaterte funksjoner i jQuery 3. En stor mangel på oppgraderingsguiden er at de utdaterte funksjonene - fra juni 2016 - ikke er gruppert, så hvis du er interessert i dem, må du se dem opp med nettleserens søkeverktøy ( Ctrl + F).

2. jQuery 3.0 kjører i streng modus

Som de fleste nettlesere støttet av jQuery 3 støtter strenge modus, har den nye store utgivelsen blitt bygget med dette direktivet i tankene.

Selv om jQuery 3 er skrevet i streng modus, er det viktig å vite det Koden din kreves ikke å kjøre i streng modus, så du trenger ikke å omskrive Din eksisterende jQuery-kode hvis du vil overføre til jQuery 3. Strenge og ikke-streng modus JavaScript kan gjerne eksistere sammen.

Det er ett unntak: noen versjoner av ASP.NET som - på grunn av den strenge modusen - er ikke kompatibel med jQuery 3. Hvis du er involvert i ASP.NET, kan du se på detaljene her i dokumentene.

3. For ... av Loops er introdusert

jQuery 3 støtter for ... av setningen, en ny type til loop, introdusert i ECMAScript 6. Det gir en mer grei måte å loop over iterable objekter, for eksempel Arrays, Maps og Sets.

I jQuery, den for ... av loop kan erstatte den tidligere $ .each (...) syntaks, og kan gjøre det lettere å bla gjennom elementene i en jQuery-samling.

Legg merke til at for ... av sløyfe vilje bare arbeid enten i et miljø som støtter ECMAScript 6, eller hvis du bruk en JavaScript-kompilator slik som Babel.

4. Animasjoner Fikk en ny API

jQuery 3 bruker requestAnimationFrame () API for å utføre animasjoner, lage animasjoner Kjør jevnere og raskere. Den nye API-en brukes kun i nettlesere som støtter den. for eldre nettlesere (dvs. IE9) jQuery bruker sin tidligere API som en tilbakebetaling metode for å vise animasjoner.

RequestAnimationFrame har vært ute en stund, hvis du er interessert i hva den vet eller hvorfor du bør bruke den, har CSS Tricks et godt innlegg om det.

5. Ny metode for å unnslippe strenger med spesiell betydning

Den nye jQuery.escapeSelector () Metoden lar deg flykte strenger eller tegn som mener noe annet i CSS for å kunne bruk den i en jQuery-velg; uten å rømme JavaScript-tolken kan ikke forstå det på riktig måte.

Dokumentene hjelper oss med å forstå denne metoden bedre med følgende eksempel:

“For eksempel, hvis et element på siden har et ID på “A B C D E F” det kan ikke velges med $ ("# abc.def") fordi väljeren blir analysert som “et element med id 'Abc' som også har en klasse 'Def'. Det kan imidlertid velges med $ ("#" + $ .escapeSelector ("abc.def")).”

Jeg er ikke sikker på hvor ofte et slikt tilfelle skjer, men hvis du støter på et problem som dette, har du nå en enkel måte å raskt fikse det på.

6. Klasse Manipuleringsmetoder Støtte SVG

Dessverre, jQuery 3 fortsatt støtter ikke SVG fullt ut, men jQuery-metodene som manipulerer CSS-klassenavn, for eksempel .addClass () og .hasClass (), Nå kan det brukes til målrett SVG-dokumenter også. Dette betyr at du kan endre (legge til, fjerne, bytte) eller finne klasser med jQuery i skalerbar vektorgrafik, så stil klassene med CSS.

7. Utsatte objekter er nå kompatible med JS-løfter

JavaScript løfter - objekter brukt for asynkron beregninger - har blitt standardisert i ECMAScript 6; deres oppførsel og egenskaper er spesifisert i løftene / a + -standardene.

I jQuery 3, Utsatte objekter har blitt gjort kompatible med de nye Promises / A + -standardene. Utsatt er kjedelige gjenstander som gjør det mulig å opprette tilbakeringingskøer.

Den nye funksjonen endres hvordan asynkrone tilbakeringingsfunksjoner utføres; Promises la utviklere skrive asynkron kode som er nærmere logisk til synkron kode.

Se kodeeksempler fra oppgraderingsveiledningen eller ta en titt på denne flotte Scotch.io-veiledningen om grunnleggende JavaScript-løfter.

8. jQuery.when () tolker flere argumenter annerledes

De $ .Når () Metoden gir en måte å utføre tilbakeringingsfunksjoner. Det er en del av jQuery siden versjon 1.5. Det er en fleksibel metode; det fungerer også med null argumenter, og det kan akseptere en eller flere objekter som argumenter også.

jQuery 3 endrer måten hvordan argumenter for $ .Når () tolkes når de inneholder $ .Og () metode som du kan sende videre tilbakeringinger som argumenter til $ .Når () metode.

I jQuery 3, hvis du legger til et inngangsargument med deretter() metode til $ .Når (), argumentet vil være tolket som en løfte-kompatibel "thenable".

Dette betyr at $ .Når Metoden vil kunne aksepter et boarder utvalg av innganger, som for eksempel ES6-løfter og Bluebird-løfter, som gjør det mulig å skrive mer sofistikerte asynkrone tilbakekallinger.

9. Ny Vis / Skjul Logikk

For å øke kompatibilitet med responsiv design, koden er relatert til viser og gjemmer elementer har blitt oppdatert i jQuery 3.

Fra nå av, den .vise fram(), .gjemme seg(), og .veksle() metoder vil fokusere på inline stiler, i stedet for beregnede stiler, på denne måten vil de bedre respekt stilark endringer.

Den nye koden respekterer vise verdier av stilark når det er mulig, noe som betyr at CSS-regler kan dynamisk endring på hendelser som for eksempel omformering av enheten og vinduets størrelse.

Dokumenterne hevder at det viktigste resultatet vil være:

"Som et resultat er frakoblede elementer ikke lenger betraktet som skjult med mindre de har inline skjerm: ingen;, og derfor .veksle() vil ikke lenger skille dem fra fra tilkoblede elementer fra jQuery 3.0. "

Hvis du vil forstå det bedre Resultatene av det nye showet / skjullogikken, her er en interessant Github diskusjon om det.

jQuery-utviklere publiserte også et Google Docs-tabell om hvordan den nye oppførselen vil fungere i forskjellige brukstilfeller.

10. Ekstra beskyttelse mot XSS-anfall

jQuery 3 lagt til et ekstra sikkerhetslag mot XSS-angrep ved å kreve at utviklere spesifiserer dataType: "script" i alternativene til $ .Ajax () og $ .Få () fremgangsmåter.

Med andre ord, hvis du vil utføre domeneskriptforespørsler på tvers av domener, vil du må deklarere dette i innstillingene av disse metodene.

Ifølge dokumentene er det nye kravet nyttig når et "eksternt nettsted leverer ikke-skript innhold men senere bestemmer seg for tjene et skript som har ondsinnet hensikt". Endringen påvirker ikke $ .GetScript () metode, som den setter dataType: "script" alternativet eksplisitt.