What's New in jQuery 3 - 10 stilīgākie līdzekļi

jQuery 3.0, jaunais lielais jQuery atbrīvojums beidzot tika atbrīvots. Tīmekļa izstrādātāju kopiena gaidīja šo svarīgo soli kopš 2014. gada oktobra, kad jQuery komanda sāka strādāt pie jaunās galvenās versijas līdz 2016. gada jūnijam, kad galīgā izlaišana ir ārā.

Atbrīvošanas piezīmes solījumi a plānāks un ātrāks jQuery, ar savietojamība prātā. Šajā ziņojumā mēs aplūkojam dažas jaunās jQuery 3.0 funkcijas, lai sniegtu jums pārskatu par to, kā tā maina JavaScript ainavu.

Kur sākt

Ja vēlaties lejupielādēt eksperimentu par jQuery 3.0, dodieties pa labi uz lejupielādes lapu. Ir vērts apskatīt arī jaunināšanas rokasgrāmatu vai pirmkodu.

Ja vēlaties pārbaudīt, kā jūsu esošais projekts darbojas ar jQuery 3.0, varat izmēģināt jQuery Migrate spraudni, kas identificē jūsu koda saderības problēmas. Varat arī apskatīt nākotnes atskaites punktus.

Šis raksts neattiecas uz viss jaunās jQuery 3.0 funkcijas, tikai interesantākās: labāka kodu kvalitāte, jaunu ECMAScript 6 funkciju integrācija, jauna API animācijām, jauna metode, lai izvairītos no virknēm, palielināts SVG atbalsts, uzlabotas asinhrona atzīmes, labāka saderība ar atsaucīgām vietnēm un paaugstināta drošība.

1. Noņemti veci IE risinājumi

Viens no galvenajiem jaunā lielā atbrīvojuma mērķiem bija panākt to ātrāk un gludāk, tāpēc vecie hacks un risinājumi, kas saistīti ar IE9- tika noņemts. Tas nozīmē, ka, ja vēlaties vai ir nepieciešams atbalstīt IE6-8, jums būs jāturpina izmantot jaunāko 1.12 atbrīvot, kā pat 2.x sērijai nav pilnīga atbalsta vecākiem Internet Explorer (IE9-). Dokumentos skatiet piezīmes par pārlūkprogrammas atbalstu.

Ņemiet vērā, ka ir arī daudzas novecojušas funkcijas JQuery 3. Lielais jaunināšanas rokasgrāmatas trūkums ir tāds, ka novecojušās funkcijas - sākot ar 2016. gada jūniju - nav sagrupētas, tādēļ, ja jūs interesē, jums būs nepieciešams tos meklēt, izmantojot pārlūkprogrammas meklēšanas rīku ( Ctrl + F).

2. jQuery 3.0 darbojas stingrā režīmā

Tā kā lielākā daļa pārlūkprogrammu atbalsta jQuery 3, tiek atbalstīts stingrs režīms, jaunā nozīmīgā versija ir veidota, ņemot vērā šo direktīvu.

Lai gan jQuery 3 ir rakstīts stingrā režīmā, tas ir svarīgi zināt jūsu kodam nav nepieciešams strādāt stingri, lai jūs nav nepieciešams pārrakstīt jūsu esošais jQuery kods, ja vēlaties pāriet uz jQuery 3. Stingri un nestandarta režīma JavaScript var laimīgi līdzāspastāvēt.

Ir viens izņēmums: dažas ASP.NET versijas ka stingrā režīma dēļ nav saderīgs ar jQuery 3. Ja jūs esat iesaistīts ASP.NET, jūs varat aplūkot detaļas šeit dokumentos.

3. Tiek ieviesta… no cilpām

jQuery 3 atbalsta paziņojumu par… jaunu veidu par cilpa, kas ieviesta ECMAScript 6. Tas dod vienkāršāku ceļu cilpas pār iterējamiem objektiem, piemēram, Arrays, Kartes un Komplekti.

JQuery, par… cilpa var aizstāt pirmo $ .each (…) sintakse, un var padarīt vieglāku cilpa caur jQuery kolekcijas elementiem.

Ņemiet vērā, ka par… cilpa būs darbojas tikai vai nu tādā vidē atbalsta ECMAScript 6, vai ja jūs izmantot JavaScript kompilatoru piemēram, Babelis.

4. Animācijas ir jauna API

jQuery 3 izmanto requestAnimationFrame () API, lai veiktu animācijas, padarītu animācijas darbojas vienmērīgāk un ātrāk. Jaunā API tiek izmantota tikai pārlūkprogrammās, kas to atbalsta; vecākiem pārlūkiem (t.i., IE9) jQuery izmanto savu iepriekšējo API kā rezerves metodi, lai parādītu animācijas.

RequestAnimationFrame CSS triki ir labs paziņojums par to, ja jūs esat ieinteresēts, ko tas zina vai kāpēc to izmantot.

5. Jauna metode, lai izvairītos no virknēm ar īpašu nozīmi

Jauno jQuery.escapeSelector () metode ļauj izvairīties no virknēm vai rakstzīmēm CSS nozīmē kaut ko citu lai varētu izmantojiet to jQuery selektorā; izvairoties no JavaScript tulka nevar pareizi saprast.

Dokumenti palīdz mums labāk izprast šo metodi ar šādu piemēru:

“Piemēram, ja lapas elementam ir ID “abc.def” to nevar atlasīt ar $ ("# abc.def") jo selektors tiek analizēts kā “elements ar ID 'abc' tai ir arī klase 'def'. Tomēr to var izvēlēties ar $ ("#" + $ .escapeSelector ("abc.def")).”

Es neesmu pārliecināts, cik bieži šāds gadījums notiek, bet, ja jūs saskāries ar šādu problēmu, tagad jums ir vienkāršs veids, kā to ātri novērst.

6. Klases manipulācijas metodes Atbalsts SVG

Diemžēl jQuery 3 joprojām pilnībā neatbalsta SVG, bet jQuery metodes, kas manipulē ar CSS klases nosaukumiem, piemēram, .addClass () un .hasClass (), tagad var pierast SVG dokumentus arī. Tas nozīmē, ka jūs varat modificēt (pievienot, noņemt, pārslēgt) vai atrast klases ar jQuery Scalable Vector Graphics, pēc tam veidojiet klases ar CSS.

7. Atliktie objekti tagad ir saderīgi ar JS solījumiem

JavaScript solījumi - izmantotie objekti asinhroniem aprēķiniem - ir standartizēti ECMAScript 6; to uzvedība un īpašības ir norādītas Promises / A + standartos.

JQuery 3, Atliktie objekti ir saskaņoti ar jaunajiem Promises / A + standartiem. Atliktie maksājumi ir ķēdes objekti kas ļauj izveidojiet atzvanīšanas rindas.

Jaunā funkcija mainās kā tiek izpildītas asinhronās atzvanīšanas funkcijas; Solījumi ļauj izstrādātājiem rakstīt asinhronu kodu, kas ir tuvāks loģikai ar sinhrono kodu.

Skatiet atjaunināšanas rokasgrāmatas koda piemērus vai aplūkojiet šo lielisko Scotch.io pamācību par JavaScript solījumu pamatiem.

8. jQuery.when () interpretē vairākus argumentus atšķirīgi

The $ .when () metode nodrošina iespēju izpildiet atzvanīšanas funkcijas. Tā ir daļa no jQuery kopš 1.5. Versijas. Tā ir elastīga metode; tas arī darbojas ar nulles argumentiem, un tas var pieņemt arī vienu vai vairākus objektus kā argumentus.

jQuery 3 maina veidu, kā argumenti $ .when () tiek interpretēti ja tie satur $ .then () metodi ar kuru jūs varat nodot papildu atsaukumus kā argumentus $ .when () metodi.

JQuery 3, ja pievienojat ievades argumentu ar tad () metode $ .when (), arguments būs interpretējams kā Promise saderīgs.

Tas nozīmē, ka $ .when metode varēs pieņemt papildu izejvielu klāstu, piemēram, dzimtā ES6 solījumi un Bluebird solījumi, kas ļauj rakstīt sarežģītākus asinhronos zvanus.

9. Jauna rādīšana / slēpšana

Lai palielinātu saderība ar atsaucīgu dizainu, kods, kas saistīts ar rāda un slēpj elementus ir atjaunināts ar jQuery 3.

No šī brīža .rādīt (), .slēpt (), un .pārslēgties () koncentrējas uz metodēm inline stili, tā vietā, lai aprēķinātu stilu, viņi to darīs labāk ievērot stilu lapu izmaiņas.

Jaunais kods atbilst displejs stilu lapu vērtības, kad tas ir iespējams, kas nozīmē, ka CSS noteikumi var būt dinamiski mainās tādiem notikumiem kā ierīces pārorientācija un loga izmēru maiņa.

Dokumentos ir norādīts, ka vissvarīgākais rezultāts būs:

"Rezultātā atvienoti elementi ir vairs netiek uzskatīts par slēptu ja vien viņiem nav inline displejs: nav;, un tāpēc .pārslēgties () gribu vairs neatšķir no saistītiem elementiem, kā no jQuery 3.0. "

Ja vēlaties labāk izprast jaunās parādīt / slēpt loģikas rezultātus, šeit ir interesanta Github diskusija par to.

jQuery izstrādātāji arī publicēja Google dokumentu tabulu par to, kā jaunā rīcība darbosies dažādos lietošanas gadījumos.

10. Papildu aizsardzība pret XSS uzbrukumiem

jQuery 3 pievienots papildu drošības slānis pret Cross-Site Scripting (XSS) uzbrukumiem, pieprasot izstrādātājiem precizēt dataType: "skripts" iespējas $ .ajax () un $ .get () metodes.

Citiem vārdiem sakot, ja vēlaties izpildīt starpdomēnu skriptu pieprasījumus, jūs tam ir jāpaziņo šo metožu iestatījumos.

Saskaņā ar dokumentiem jaunā prasība ir noderīga, ja tiek izmantota “attālināta vietne” nodrošina ne skriptu saturu bet vēlāk nolemj kalpot skriptam, kam ir ļaunprātīgs nolūks". Izmaiņas neietekmē $ .getScript () metodi, jo tā nosaka dataType: "skripts" iespēju.