Mitä uutta on jQuery 3 - 10 Coolest Features

jQuery 3.0, jQueryn uusi suuri julkaisu julkaistiin lopulta. Web-kehittäjäyhteisö odotti tätä tärkeää askelta lokakuusta 2014 lähtien, jolloin jQuery-tiimi alkoi työskennellä uudessa suuressa versiossa, kesäkuussa 2016, jolloin viimeinen julkaisu on ulkona.

Julkaisutiedote lupaa a ohuempi ja nopeampi jQuery, jossa taaksepäin yhteensopivuus mielessä. Tässä viestissä tarkastelemme joitakin jQuery 3.0: n uusia ominaisuuksia, jotta saat yleiskuvan siitä, miten se muuttaa JavaScript-maisemaa.

Mistä aloittaa

Jos haluat ladata jQuery 3.0: n kokeilemaan itse, siirry oikealle lataussivulle. On myös syytä tarkastella päivitysopasta tai lähdekoodia.

Jos haluat testata, miten nykyinen projekti toimii jQuery 3.0: n kanssa, voit kokeilla jQuery Migrate -laajennusta, joka tunnistaa koodin yhteensopivuusongelmat. Voit myös kuunnella tulevia virstanpylväitä.

Tämä artikkeli ei kata kaikki jQuery 3.0: n uudet ominaisuudet, vain mielenkiintoisemmat: parempi koodin laatu, uusien ECMAScript 6 -ominaisuuksien integrointi, uusi API animaatioille, uusi menetelmä poistua merkkijonoista, lisääntynyt SVG-tuki, parannetut asynkikutsut, parempi yhteensopivuus vastaavien sivustojen kanssa ja lisääntynyt turvallisuus.

1. Vanhat IE-ratkaisut poistettiin

Yksi uuden merkittävän julkaisun päätavoitteista oli tehdä se nopeampi ja sulavampi, siksi vanhat häkit ja ongelmat, jotka liittyvät IE9: ään- poistettiin. Tämä tarkoittaa, että jos haluat tai tarvitset tukea IE6-8: lle, sinun on käytettävä uusinta 1.12 vapauttaa, kuten jopa 2.x sarjassa ei ole täyttä tukea vanhemmille Internet Explorersille (IE9-). Tutustu selainten tuen muistiinpanoihin asiakirjoissa.

Huomaa, että on olemassa myös monia vanhentuneita ominaisuuksia jQuery 3. Upgrade Guide -palvelun suuri puute on, että vanhentuneita ominaisuuksia - kesäkuusta 2016 alkaen - ei ole ryhmitelty, joten jos olet kiinnostunut niistä, sinun täytyy etsiä ne selaimesi hakutyökalulla ( ctrl + F).

2. jQuery 3.0 Toimii tiukassa tilassa

Koska useimmat jQuery 3: n tukemat selaimet tukevat tiukkaa tilaa, uusi suuri julkaisu on rakennettu tämän direktiivin mukaisesti.

Vaikka jQuery 3 on kirjoitettu tiukassa tilassa, on tärkeää tietää se koodia ei tarvitse käyttää tiukassa tilassa, joten sinä ei tarvitse kirjoittaa nykyinen jQuery-koodi, jos haluat siirtyä jQueryyn 3. Tiukka & ei-tiukka tila JavaScript voi olla iloisesti rinnakkain.

Yksi poikkeus on: joitakin ASP.NET-versioita että - tiukan tilan vuoksi - ovat ei sovi yhteen jQuery 3: n kanssa. Jos olet mukana ASP.NET: ssä, voit tarkastella yksityiskohtia tässä asiakirjoissa.

3. Loops on…

jQuery 3 tukee ilmoitusta, uudenlaista varten silmukka, joka on otettu käyttöön ECMAScript 6: ssa. Se antaa helpomman tavan silmukan yli toistettavien objektien, esimerkiksi Arrays, Maps ja Sets.

Vuonna jQuery, … silmukka voi korvata ensimmäisen $ .each (…) syntaksi, ja se voi helpottaa silikointia jQuery-kokoelman elementtien kautta.

Huomaa, että … silmukka tulee toimi vain joko ympäristössä tukee ECMAScript 6: ta, tai jos käytä JavaScript-kääntäjää kuten Babel.

4. Animaatiot Sai uusi API

jQuery 3 käyttää animaatioiden animaatioita varten animaatioiden tekemiseen requestAnimationFrame () API: ta ajaa tasaisemmin ja nopeammin. Uutta API: ta käytetään vain selaimissa, jotka tukevat sitä; vanhemmille selaimille (eli IE9) jQuery käyttää aiempaa API: ta varmuusmenetelmänä animaatioiden näyttämiseksi.

RequestAnimationFrame on ollut jonkin aikaa, jos olet kiinnostunut siitä, mitä se tietää tai miksi sinun pitäisi käyttää sitä, CSS Tricksillä on hyvä viesti siitä.

5. Uusi menetelmä kiertää merkkijonoja erityisellä merkityksellä

Uusi jQuery.escapeSelector () avulla voit välttää merkkijonoja tai merkkejä tarkoittaa jotain muuta CSS: ssä voidakseen käytä sitä jQuery-valitsimessa; JavaScript-tulkki ei välttämättä ymmärrä sitä asianmukaisesti.

Asiakirjat auttavat meitä ymmärtämään tätä menetelmää paremmin seuraavalla esimerkillä:

“Jos esimerkiksi sivun elementillä on tunnus “A B C D E F” sitä ei voi valita $ ("# abc.def") koska valitsin on jäsennetty kuten “elementti, jolla on tunnus 'ABC' joka on myös luokassa 'Def'. Se voidaan kuitenkin valita $ ("#" + $ .escapeSelector ("abc.def")).”

En ole varma, kuinka usein tällainen tapaus tapahtuu, mutta jos törmäät tällaiseen ongelmaan, nyt sinulla on helppo tapa korjata se.

6. Luokan manipulointimenetelmät Tuki SVG

Valitettavasti jQuery 3 on edelleen ei täysin tue SVG: tä, mutta JQuery-menetelmät, jotka käsittelevät CSS-luokan nimiä, kuten .addClass () ja .hasClass (), nyt voidaan käyttää kohdista SVG-asiakirjat yhtä hyvin. Tämä tarkoittaa sitä, että voit muokata (lisätä, poistaa, vaihtaa) tai löytää luokkia jQueryn avulla skaalautuvassa vektorigrafiikassa, sitten tyyliä luokat CSS: llä.

7. Lykätyt objektit ovat nyt yhteensopivia JS Promisesin kanssa

JavaScript-lupaukset - käytetyt kohteet asynkronisille laskelmille - on standardoitu ECMAScript 6: ssa; niiden käyttäytyminen ja ominaisuudet määritellään Promises / A + -standardeissa.

Vuonna jQuery 3, Lykätyt objektit on tehty yhteensopiviksi uusien Promises / A + -standardien kanssa. Lykkäykset ovat ketjutettavat esineet jotka mahdollistavat luoda takaisinsoittojonot.

Uusi ominaisuus muuttuu miten asynkroniset soittotoiminnot suoritetaan; lupauksia antaa kehittäjille mahdollisuuden kirjoittaa asynkroninen koodi, joka on lähempänä loogista synkronista koodia.

Katso koodin esimerkkejä Päivitysoppaasta tai katso tämä suuri Scotch.io-opetusohjelma JavaScript-lupausten perusteista.

8. jQuery.when () tulkitsee monenlaiset argumentit eri tavalla

$ .Kun () menetelmä tarjoaa keinon suorittaa soittopyynnöt. Se on osa jQueryä, koska versio 1.5. Se on joustava menetelmä; se toimii myös nolla-argumenteilla, ja se voi myös hyväksyä yhden tai useamman objektin argumenteina.

jQuery 3 muuttaa tapaa, jolla $ .Kun () tulkitaan kun ne sisältävät $ .Sitten () menetelmä jonka avulla voit siirtää lisäkutsut argumentteina $ .Kun () menetelmä.

Jos lisät syötteelle argumentin jQuery 3: ssa sitten() menetelmä $ .Kun (), väite on tulkitaan Promise-yhteensopivaksi "sitten \ t.

Tämä tarkoittaa sitä, että $ .Kun menetelmällä hyväksyä raja-aluetason tuloja, kuten alkuperäiset ES6-lupaukset ja Bluebird-lupaukset, jotka mahdollistavat kehittyneempien asynkronisten soittopyyntöjen kirjoittamisen.

9. Uusi näyttö / piilota logiikka

Jotta voitaisiin lisätä yhteensopivuus reagoivan suunnittelun kanssa, koodi liittyy näyttää ja piilottaa elementtejä on päivitetty jQuery 3: ssa.

Tästä lähtien .show(), .piilottaa(), ja .toggle () menetelmät keskittyvät inline-tyylit, laskennallisten tyyleiden sijaan paremmin kunnioittaa tyylitaulukon muutoksia.

Uusi koodi kunnioittaa näyttö tyylisivujen arvot aina kun se on mahdollista, mikä tarkoittaa, että CSS-säännöt voivat muuttuu dynaamisesti tapahtumiin, kuten laitteen uudelleen suuntaamiseen ja ikkunan kokoa.

Asiakirjoissa todetaan, että tärkein tulos on:

"Tämän seurauksena irrotetut elementit ovat ei enää pidetä piilossa ellei heillä ole linjaa näyttö: ei;, ja siksi .toggle () tahtoa enää erottaa niitä liitetyistä elementeistä kuin jQuery 3.0. "

Jos haluat ymmärtää paremmin uuden show / hide-logiikan tulokset, Tässä on mielenkiintoinen Github-keskustelu siitä.

jQuery-kehittäjät julkaisivat myös Google-dokumenttien taulukon siitä, miten uusi käyttäytyminen toimii eri käyttötapauksissa.

10. Lisäsuojaus XSS-hyökkäyksiä vastaan

jQuery 3 lisäsi ylimääräinen suojaustaso XSS (Cross-Site Scripting) -hyökkäyksiä vastaan ​​vaatimalla kehittäjien määrittämistä dataType: "script" vaihtoehtoja $ .Ajax () ja $ .Get () menetelmät.

Toisin sanoen, jos haluat suorittaa rajat ylittäviä komentosarjapyyntöjä, sinä täytyy ilmoittaa tämä näiden menetelmien asetuksissa.

Asiakirjojen mukaan uusi vaatimus on hyödyllinen, kun "etäpaikka tarjoaa ei-script-sisältöä mutta myöhemmin päättää palvella skriptiä, jolla on haitallista tarkoitustaMuutos ei vaikuta $ .GetScript () menetelmä, koska se asettaa dataType: "script" vaihtoehto.