Što je novo u jQuery 3 - 10 zgodnim značajkama

jQuery 3.0, novo veliko izdanje jQuery konačno je objavljeno. Zajednica web-razvojnih programera čekala je ovaj važan korak od listopada 2014., kada je tim jQuery počeo raditi na novoj glavnoj verziji do sada, lipnja 2016, kada konačnog izdanja je vani.

Obavijest o izdanju obećava a vitkiji i brži jQuery, s kompatibilnost unatrag na umu. U ovom postu pregledavamo neke od novih značajki jQuery 3.0 kako bismo vam pružili pregled načina na koji mijenjaju JavaScript pejzaž.

Gdje započeti

Ako želite preuzeti jQuery 3.0 kako biste sami eksperimentirali, idite na stranicu za preuzimanje. Također je vrijedno pogledati Vodič za nadogradnju ili izvorni kod.

Ako želite testirati kako vaš postojeći projekt funkcionira s jQuery 3.0, možete pokušati s dodatkom jQuery Migrate koji identificira probleme s kompatibilnošću u vašem kodu. Također možete zaviriti u buduće događaje.

Ovaj članak ne pokriva svi nove značajke jQuery 3.0, samo one zanimljivije: bolja kvaliteta koda, integracija novih značajki ECMAScript 6, novi API za animacije, nova metoda za izbjegavanje nizova, povećana podrška za SVG, poboljšane async povratne veze, bolja kompatibilnost s odgovornim web-lokacijama i povećana sigurnost.

1. Stari IE rješenje je uklonjeno

Jedan od glavnih ciljeva novog velikog izdanja bio je da to napravi brže i uglađenije, dakle stare hakove i zaobilaznice vezane uz IE9- uklonjen. To znači da ako želite ili trebate podržavati IE6-8, morat ćete nastaviti koristiti najnovije 1.12 puštanje, čak i 2.x serija nema punu podršku za starije Internet Explorere (IE9-). Pogledajte bilješke o podršci preglednika u dokumentima.

Imajte na umu da postoje i mnogo zastarjelih značajki u jQuery 3. Veliki nedostatak Vodiča za nadogradnju je da zastarjele značajke - od lipnja 2016. - nisu grupirane, pa ako ste zainteresirani za njih, morat ćete ih potražiti pomoću alata za pretraživanje preglednika ( ctrl + F).

2. jQuery 3.0 radi u strogom načinu rada

Kao što većina preglednika podržava JQuery 3 podržava strogi način, novi veliki izdanje je izgrađen s ovom direktivom na umu.

Iako je jQuery 3 napisan u strogom načinu rada, važno je to znati Vaš kôd nije potreban za rad u strogom načinu rada, pa ti ne morate ponovno pisati Vaš postojeći jQuery kod ako želite migrirati na jQuery 3. Strict & non-strict način JavaScript mogu sretno koegzistirati.

Postoji jedna iznimka: neke verzije ASP.NET-a da - zbog strogog načina - jesu nije kompatibilan s jQuery 3. Ako ste uključeni u ASP.NET, možete pogledati detalje u dokumentima.

3. Za… od petlji je uveden

jQuery 3 podržava za… izjavu, novu vrstu za petlja, uvedena u ECMAScript 6. To daje jednostavniji način petlja preko iterabilnih objekata, kao što su polja, karte i skupovi.

U jQuery, za ... od petlja može zamijeniti prvu $ .each (…) sintaksu i može olakšati prelazak kroz elemente jQuery kolekcije.

Imajte na umu da za ... od petlja će samo raditi bilo u okruženju koje podržava ECMAScript 6, ili ako vi koristiti JavaScript prevodilac kao što je Babel.

4. Animacije dobio novi API

jQuery 3 koristi API zahtjevaAnimationFrame () za izvođenje animacija, izradu animacija trčanje glatko i brže. Novi se API koristi samo u preglednicima koji ga podržavaju; za starije preglednike (tj. IE9) jQuery koristi svoj prethodni API kao zamjensku metodu za prikazivanje animacija.

RequestAnimationFrame je već neko vrijeme izvan, ako vas zanima što zna ili zašto biste ga trebali koristiti, CSS trikovi imaju dobar post o tome.

5. Nova metoda za izbjegavanje nizova s ​​posebnim značenjem

Novi jQuery.escapeSelector () metoda vam omogućuje da izbjegavate nizove ili znakove znači nešto drugo u CSS-u kako bi mogli koristite ga u jQuery-selektoru; bez izbjegavanja JavaScript tumača ne može ga pravilno razumjeti.

Dokumenti nam pomažu bolje razumjeti tu metodu pomoću sljedećeg primjera:

“Na primjer, ako element na stranici ima ID od “a B C D E F” ne može se odabrati s $ ("# abc.def") jer je selektor analiziran kao “element s id 'Abc' koji također ima klasu 'Def'. Međutim, može se odabrati s $ ("#" + $ .escapeSelector ("abc.def")).”

Nisam siguran koliko često se takav slučaj događa, ali ako naletite na ovakav problem, sada imate jednostavan način da ga brzo riješite.

6. Metode manipulacije klasama Podrška za SVG

Nažalost, jQuery 3 i dalje ne podržava u potpunosti SVG, ali jQuery metode koje manipuliraju CSS imena klasa, kao što su .addClass () i .hasClass (), sada se može koristiti ciljane SVG dokumente također. To znači da možete mijenjati (dodavati, uklanjati, mijenjati) ili pronaći klase s jQuery u Scalable Vector Graphics, onda stilove s CSS.

7. Odgođeni objekti sada su kompatibilni s JS Promise

JavaScript obećanja - objekti koji se koriste za asinkrone izračune - standardizirani su u ECMAScript 6; njihovo ponašanje i obilježja navedena su u standardima Promises / A +.

U jQuery 3, Odloženi objekti u skladu s novim standardima Promises / A +. Odgođeni su predmeti s lancima koje omogućuju stvoriti čekanja za povratne pozive.

Nova se značajka mijenja kako se izvršavaju asinkrone funkcije povratnog poziva; obećanja dopustiti programerima da napišu asinkroni kod koji je bliži logici sinkronog koda.

Pogledajte primjere koda iz Vodiča za nadogradnju ili pogledajte ovaj veliki Scotch.io vodič o osnovama JavaScript obećanja.

8. jQuery.when () tumači različite argumente

$ .Kada () metoda omogućuje put do izvršavanje funkcija povratnog poziva. To je dio jQuery od verzije 1.5. To je fleksibilna metoda; također radi s nula argumenata, i može prihvatiti jedan ili više objekata kao argumente.

jQuery 3 mijenja način na koji argumenti $ .Kada () tumače kada sadrže $ .Zatim () način s kojim možete proslijediti dodatne povratne pozive kao argumente $ .Kada () način.

U jQuery 3, ako dodate ulazni argument s zatim() metoda $ .Kada (), argument će biti tumačiti kao "tadašnje" kompatibilno s obećanjem.

To znači da $ .Kada metoda će biti u mogućnosti prihvatiti raspon ulaznih podataka, kao što je ES6 Promises i Bluebird Promises, što omogućuje pisanje sofisticiranijih asinkronih povratnih poziva.

9. Novi prikaz / Skrivanje logike

Kako bi se povećala kompatibilnost s prilagodljivim dizajnom, kôd koji se odnosi na prikaz i skrivanje elemenata je ažuriran u jQuery 3.

Od sada pa nadalje .pokazati(), .sakriti(), i .preklopni () metode će se usredotočiti na inline stilovi, umjesto izračunatih stilova, na taj način će to i učiniti bolje poštujte promjene stilova.

Novi kod poštuje prikaz vrijednosti stilova kad god je to moguće, što znači da CSS pravila mogu dinamički se mijenjaju na događaje kao što je preorijentacija uređaja i promjena veličine prozora.

Dokumenti tvrde da će najvažniji rezultat biti:

"Zbog toga su nepovezani elementi." više se ne smatra skrivenim osim ako imaju inline prikaz: nema;, i stoga .preklopni () htjeti više ih ne razlikovati od povezanih elemenata od jQuery 3.0. "

Ako želite bolje razumjeti rezultati nove logike prikaži / sakrij, ovdje je zanimljiva Githubova diskusija o tome.

Programeri jQuery također su objavili tablicu Google dokumenata o tome kako će novo ponašanje funkcionirati u različitim slučajevima uporabe.

10. Dodatna zaštita od napada XSS-om

jQuery 3 je dodan dodatni sigurnosni sloj protiv napada na više web-lokacija (XSS) tako što zahtijeva da programeri navedu dataType: "script" u opcijama $ .Ajax () i $ .Get () metode.

Drugim riječima, ako želite izvršiti zahtjeve skripte među domenama, vi morate to prijaviti u postavkama ovih metoda.

Prema dokumentima, novi zahtjev je koristan kada je "udaljena stranica." isporučuje sadržaj koji nije skript ali kasnije odluči poslužite skriptu koja ima zlonamjernu namjeru". Promjena ne utječe na $ .GetScript () metoda, kao što postavlja dataType: "script" eksplicitno.