Kaj je novega v jQuery 3 - 10 najlepših funkcijah

jQuery 3.0, nova velika izdaja jQuery se je končno sprostila. Skupnost spletnih razvijalcev je počakala na ta pomemben korak od oktobra 2014, ko je ekipa jQuery začela delati na novi večji različici do sedaj, junija 2016, ko končno sprostitev je zunaj.

Obvestilo o izdaji obljublja a tanjši in hitrejši jQuery, z združljivost nazaj v mislih. V tej objavi si bomo ogledali nekatere nove funkcije jQuery 3.0, s katerimi boste dobili pregled nad tem, kako spreminja krajino JavaScripta.

Kje začeti

Če želite prenesti jQuery 3.0 in poskusiti zase, pojdite desno na stran za prenos. Prav tako je vredno pogledati priročnik za nadgradnjo ali izvorno kodo.

Če želite preizkusiti, kako vaš obstoječi projekt deluje z jQuery 3.0, lahko poskusite z vtičnikom jQuery Migrate, ki identificira težave z združljivostjo v kodi. Prav tako lahko pokukate v prihodnje mejnike.

Ta članek ne pokriva vse nove funkcije jQuery 3.0, samo še zanimivejše: boljša kakovost kode, integracija novih funkcij ECMAScript 6, nov API za animacije, nova metoda za izogibanje nizom, večja podpora za SVG, izboljšane povratne klice, boljša združljivost z odzivnimi spletnimi mesti in večjo varnost.

1. Stare IE rešitve so bile odstranjene

Eden od glavnih ciljev nove velike izdaje je bil, da je uspelo hitrejši in gladkejši, zato so se stari hekerji in zaobiti, povezani z IE9- odstranili. To pomeni, da če želite ali morate podpirati IE6-8, boste morali uporabljati najnovejše 1.12 sprostitev, kot tudi 2.x serija nima popolne podpore za starejše internetne raziskovalce (IE9-). Oglejte si opombe o podpori brskalnika v dokumentih.

Upoštevajte, da obstajajo tudi veliko opuščenih funkcij v jQuery 3. Velika pomanjkljivost Priročnika za nadgradnjo je, da opuščene funkcije - od junija 2016 - niso združene, zato jih morate, če vas zanima, iskati v iskalnem orodju brskalnika ( Ctrl + F).

2. jQuery 3.0 deluje v strogem načinu

Ker večina brskalnikov, ki jih podpira jQuery 3, podpira strog način, je bila nova glavna izdaja izdelana v mislih s to direktivo.

Čeprav je jQuery 3 napisana v strogem načinu, je pomembno vedeti Vaša koda ni potrebna za izvajanje v strogem načinu, Torej vi ni treba ponovno pisati vašo obstoječo kodo jQuery, če želite preseliti v jQuery 3. Strict & non-strict način JavaScript lahko srečno sobivajo.

Obstaja ena izjema: nekatere različice ASP.NET da so - zaradi strogega načina - ni združljiv z jQuery 3. Če ste povezani z ASP.NET, si lahko podrobnosti ogledate v dokumentih.

3. Za… zank je uveden

jQuery 3 podpira za ... izjavo, novo vrsto za zanke, uvedene v ECMAScript 6. Omogoča bolj preprost način zanke nad ponovljivimi predmeti, kot so polja, zemljevidi in nizi.

V jQuery, za… od zanke lahko zamenja prvo $ .each (…) sintakso, in lahko olajša zanemarjanje elementov zbirke jQuery.

Upoštevajte, da za… od zanke samo delo v okolju, ki podpira ECMAScript 6, ali če ste uporabite prevajalnik JavaScript kot Babel.

4. Animacije je dobil nov API

jQuery 3 uporablja API-ja requestAnimationFrame () za izvajanje animacij, izdelavo animacij teče gladko in hitreje. Novi API se uporablja samo v brskalnikih, ki ga podpirajo; za starejše brskalnike (tj. IE9) jQuery uporablja svoj prejšnji API kot nadomestno metodo za prikaz animacij.

RequestAnimationFrame je že nekaj časa prazen, če vas zanima, kaj ve ali zakaj bi ga morali uporabljati, ima CSS triki dober post o tem.

5. Nova metoda za izogibanje strunam s posebnim pomenom

Novi jQuery.escapeSelector () metoda vam omogoča, da se izognete nizom ali znakom pomeni nekaj drugega v CSS da bi lahko uporabite ga v izbirniku jQuery; ne da bi se izognili JavaScriptu, ga interpret ne more pravilno razumeti.

Dokumenti nam pomagajo bolje razumeti to metodo z naslednjim primerom:

“Na primer, če ima element na strani id za “abc.def” ga ni mogoče izbrati z $ ("# abc.def") ker je izbirnik razčlenjen kot “element z id "abc" ki ima tudi razred "def". Lahko pa ga izberete z $ ("#" + $ .escapeSelector ("abc.def")).”

Ne vem, kako pogosto se zgodi tak primer, toda če naletite na težavo, kot je ta, imate zdaj enostaven način za hitro odpravo težave..

6. Metode manipulacije razredov Podpora SVG

Na žalost jQuery 3 še vedno ne podpira v celoti SVG, vendar jQuery metode, ki manipulirajo imena razredov CSS, kot npr .addClass () in .hasClass (), zdaj lahko uporabite ciljne SVG dokumente prav tako. To pomeni, da lahko spreminjate (dodajate, odstranjujete, preklapljate) ali poiščete razrede z jQuery v Scalable Vector Graphics, nato ukažite razrede s CSS.

7. Odloženi predmeti so zdaj združljivi z obljubami JS

Obljube JavaScripta - uporabljeni objekti za asinhrone izračune - so bili standardizirani v ECMAScript 6; njihovo vedenje in značilnosti so določene v standardih Promises / A +.

V jQuery 3, Odloženi predmeti združljivi z novimi standardi Promises / A +. Odložene so verižni predmeti ki omogočajo ustvarite čakalne vrste za povratni klic.

Nova funkcija se spremeni kako se izvajajo asinhrone funkcije povratnega klica; Obljube razvijalcem omogoči, da napišejo asinhrono kodo, ki je v logiki bližja sinhroni kodi.

Oglejte si primere kod v priročniku za nadgradnjo ali pa si oglejte ta odličen vadnik Scotch.io o osnovah obljub za JavaScript.

8. jQuery.when () Razlikuje različne argumente

The $ .when () metoda omogoča pot do izvaja funkcije povratnega klica. Je del jQuery od različice 1.5. To je prilagodljiva metoda; deluje tudi z ničelnimi argumenti in lahko sprejme tudi enega ali več objektov kot argumente.

jQuery 3 spremeni način, kako argumenti $ .when () se razlagajo ko vsebujejo $. then () metodo s katerim lahko posredujete dodatne povratne klice kot argumente $ .when () metodo.

V jQuery 3, če dodate vhodni argument z nato () metodo $ .when (), argument bo razlaga kot "naklonjenost", ki je združljiva z obljubo.

To pomeni, da $. ko metodo sprejeti območje vhodov, kot na primer domača ES6 obeti in obljube Bluebird, ki omogočajo pisanje bolj izpopolnjenih asinhronih povratnih klicev.

9. New Show / Hide Logic

Za povečanje združljivost z odzivno zasnovo, kodo, povezano s prikazovanje in skrivanje elementov je bil posodobljen v jQuery 3.

Od zdaj naprej .prikaži (), .skrij (), in .preklop () metode se bodo osredotočile inline styles, namesto izračunanih stilov, tako bodo bolje upoštevajte spremembe slogovnih slogov.

Nova koda spoštuje zaslon vrednosti slogov slogov, kadar je to mogoče, kar pomeni, da lahko pravila CSS dinamično spreminjanje ob dogodkih, kot so preusmeritev naprave in spreminjanje velikosti okna.

Dokumenti trdijo, da bo najpomembnejši rezultat:

"Posledično so nepovezani elementi." ne šteje več kot skrito razen če imajo inline prikaz: nič;, in zato .preklop () volja ne razlikujejo več od povezanih elementov od jQuery 3.0. "

Če želite bolje razumeti rezultatov nove logike za prikaz / skrivanje, tukaj je zanimiva Githubova razprava o tem.

Razvijalci jQuery so objavili tudi tabelo Google Dokumentov o tem, kako bo novo vedenje delovalo v različnih primerih uporabe.

10. Dodatna zaščita pred napadi XSS

jQuery 3 dodan dodatna varnostna plast z napadi, ki zahtevajo, da določijo razvijalci dataType: "script" v možnostih $ .ajax () in $ .get () metod.

Z drugimi besedami, če želite izvajati navzkrižne domenske skripte, vas mora to prijaviti v nastavitvah teh metod.

V skladu z dokumenti je nova zahteva uporabna, kadar je "oddaljena stran." dostavi vsebino, ki ni skript kasneje pa se odloči služi skript, ki ima zlonamerne namene". Sprememba ne vpliva na $ .getScript () metodo, kot določa dataType: "script" izrecno.