Domača » Kodiranje » Kaj je novega v jQuery 3 - 10 najlepših funkcijah

    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.

    jQuery Docs: Podpora za brskalnik

    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).

    jQuery Priročnik za nadgradnjo

    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.

    Primer kode iz priročnika za nadgradnjo

    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.

    www.caniuse.com

    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.

    api.jquery.com

    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.

    Diaprojekcija: Andrew Kerr: Skriptiranje med spletnimi mesti (diapozitiv 17)

    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.