What's new in jQuery 3 - 10 lahedamad funktsioonid

jQuery 3.0, jQuery uus suur versioon vabastati lõpuks. Veebiarendajate kogukond ootas seda olulist sammu alates 2014. aasta oktoobrist, mil jQuery meeskond hakkas töötama uue suurema versiooni juures seni, juuni 2016, mil lõplik vabastamine on väljas.

Vabastamismärkus lubab a õhem ja kiirem jQuery, koos ühilduvust meeles. Selles postituses vaatame mõningaid jQuery 3.0 uusi funktsioone, et anda teile ülevaade selle kohta, kuidas see JavaScript-maastikku muudab.

Kust alustada

Kui soovite ise proovimiseks eksperimenteerida, siis mine otse allalaadimislehele. Samuti tasub vaadata värskendusjuhendit või lähtekoodi.

Kui soovite testida, kuidas teie olemasolev projekt töötab jQuery 3.0-ga, saate proovida jQuery Migrate pluginat, mis tuvastab teie koodi ühilduvuse probleemid. Sa võid ka pilgu võtta tulevastesse verstapostidesse.

See artikkel ei hõlma kõik jQuery 3.0 uued funktsioonid, vaid huvitavamad: parem koodikvaliteet, uute ECMAScript 6 funktsioonide integreerimine, uus API animatsioonidele, uus meetod põgenemiseks, suurenenud SVG tugi, parendatud asünkrite tagasikutsumine, parem ühilduvus reageerivate saitidega ning turvalisuse suurendamine.

1. Vanad IE lahendused eemaldati

Uue suure väljaande üks peamisi eesmärke oli see teha kiirem ja siledam, seepärast on IE9-ga seotud vanad häkid ja lahendused- eemaldati. See tähendab, et kui soovite või peate toetama IE6-8, peate seda viimast kasutama 1.12 vabastamine, nagu isegi 2.x seeriatel puudub täielik toetus vanematele Internet Explorers'ile (IE9-). Vaadake dokumentides brauseri toe märkmeid.

Pange tähele, et seal on ka palju vananenud funktsioone JQuery'is 3. Uuendusjuhendi suureks puuduseks on see, et aegunud funktsioonid - alates 2016. aasta juunist - ei ole grupeeritud, nii et kui neid huvitab, peate neid otsima oma brauseri otsinguvahendist ( Ctrl + F).

2. jQuery 3.0 Töötab ranges režiimis

Kuna enamik jQuery 3 toetatud brausereid toetavad ranget režiimi, on uus suur väljaanne ehitatud selle direktiiviga.

Kuigi jQuery 3 on kirjutatud ranges režiimis, on oluline seda teada teie kood ei ole nõutav ranges režiimis töötamiseks, nii et sina ei pea ümber kirjutama teie olemasolev jQuery-kood, kui soovite migreeruda jQuery 3. Strict & non-range mode JavaScript võib õnnelikult koos eksisteerida.

On üks erand: mõned ASP.NETi versioonid see on range režiimi tõttu ei ühildu jQuery 3-ga. Kui olete seotud ASP.NET-iga, saate vaadata siin dokumentides toodud üksikasju.

3. Sõnade… jaoks on sisse toodud

jQuery 3 toetab avalduse… uut tüüpi jaoks silmus, mis on toodud ECMAScript 6-s. See annab lihtsama võimaluse silmus üle kuuluvate objektide, näiteks kaardid, kaardid ja komplektid.

In jQuery, … ring võib asendada esimese $ .each (…) süntaks, ja see võib lihtsustada jQuery kollektsiooni elementide sirvimist.

Pange tähele, et … silmusmärk töötage ainult kas sellises keskkonnas toetab ECMAScript 6, või kui sa kasutage JavaScripti kompilaatorit nagu Babel.

4. Animatsioonid On uus API

jQuery 3 kasutab animatsioone esitavate animatsioonide tegemiseks requestAnimationFrame () API-d sujuvam ja kiirem. Uut API-d kasutatakse ainult seda toetavates brauserites; vanemate brauserite (s.o IE9) puhul kasutab jQuery animatsiooni vaatamiseks varasemast meetodist oma varasemat API-d.

RequestAnimationFrame on olnud mõnda aega, kui olete huvitatud sellest, mida ta teab või miks peaksite seda kasutama, on CSS-i trikkidel hea postitus.

5. Uus meetod eritähendusega stringide põgenemiseks

Uus jQuery.escapeSelector () meetod võimaldab teil pääseda stringidest või tähemärkidest tähendab CSS-is midagi muud selleks, et oleks võimalik kasutage seda jQuery-selektoris; ilma põgenemiseta ei suuda JavaScript tõlk seda õigesti mõista.

Dokumendid aitavad meil seda meetodit paremini mõista järgmise näite abil:

“Näiteks kui lehekülje elemendil on id “abc.def” seda ei saa valida $ ("# abc.def") sest selektor on parsitud kui “ID-ga element 'abc' sellel on ka klass 'def'. Seda saab aga valida koos $ ("#" + $ .escapeSelector ("abc.def")).”

Ma ei ole kindel, kui tihti selline juhtum juhtub, aga kui te sellesse probleemi satute, on teil nüüd lihtne viis selle kiiresti lahendada.

6. Klassi manipuleerimismeetodite tugi SVG

Kahjuks jQuery 3 ikka veel ei toeta täielikult SVG-d, kuid jQuery meetodid, mis manipuleerivad CSS-klassi nimedega, näiteks .addClass () ja .hasClass (), nüüd saab seda kasutada SVG-dokumentide sihtimine samuti. See tähendab, et saate muuta (lisada, eemaldada, lülitada) või leida klassid jQueryga skaleeritavas vektorgraafikas, seejärel kujundage klassid CSS-iga.

7. Edasilükatud objektid on nüüd ühilduvad JS lubadustega

JavaScript lubadused - kasutatud objektid asünkroonse arvutuse jaoks - on standarditud ECMAScript 6-s; nende käitumine ja omadused on täpsustatud Promises / A + standardites.

JQuery 3-s, Edasilükatud objektid need on kooskõlas uute Promises / A + standarditega. Edasilükatud on aheldatavad objektid see võimaldab luua tagasihelistamisjärjekorrad.

Uus funktsioon muutub kuidas asünkroonseid tagasihelistamisfunktsioone teostatakse; Lubadused võimaldada arendajatel kirjutada sünkroonse koodi loogikas lähemal asünkroonne kood.

Vaadake koodi näiteid värskendusjuhendist või vaadake seda suurt Scotch.io juhendit, mis käsitleb JavaScripti lubaduste põhialuseid.

8. jQuery.when () tõlgendab erinevaid argumente erinevalt

The $ .when () meetod annab võimaluse täitke tagasihelistamise funktsioone. See on osa jQueryst alates versioonist 1.5. See on paindlik meetod; see toimib ka null-argumentidega ja saab ühe või mitme objekti vastu ka argumentidena.

jQuery 3 muudab viisi, kuidas $ .when () tõlgendatakse kui need sisaldavad $ .then () meetod kellega saate edasi anda täiendavaid tagasikutsumisi $ .when () meetod.

JQuery 3-s, kui lisate sisendargumenti siis () meetod $ .when (), argument on tõlgendatakse kui Promise-ühilduvat „siis \ t.

See tähendab, et $ .when meetod aktsepteerima piiramatut sisendit, nagu näiteks ES6 Promises ja Bluebird Promises, mis võimaldab kirjutada keerukamaid asünkroonseid tagasikutsumisi.

9. Uus näitamine / peitmine

Et suurendada ühilduvus tundliku disainiga, seotud kood elementide näitamine ja peitmine on värskendatud jQuery 3-s.

Nüüdsest .näita (), .peida (), ja .ümberlülitamine () keskenduvad meetodid inline stiilid, arvutatud stiilide asemel sellisel viisil parema austusega stiilitabeli muudatused.

Uus kood austab kuva stiililehtede väärtused alati, kui see on võimalik, mis tähendab, et CSS-i reeglid saavad dünaamiliselt muutuvad selliste sündmuste puhul nagu seadme ümberkorraldamine ja akna suuruse muutmine.

Dokumendid kinnitavad, et kõige olulisem tulemus on:

"Selle tulemusena on eraldatud elemendid ei peeta enam peidetud kui neil on inline kuva: pole;, ning seetõttu .ümberlülitamine () tahe neid enam ei eristata seotud elementidest nagu jQuery 3.0. "

Kui soovite seda paremini mõista uue näitamise / peitmise loogika tulemused, siin on huvitav Githubi arutelu.

jQuery arendajad avaldasid ka Google'i dokumentide tabeli selle kohta, kuidas uus käitumine toimib erinevates kasutusjuhtumites.

10. Lisakaitse XSS-rünnakute vastu

jQuery 3 lisati täiendav turvakiht ristsaiduste skriptimise (XSS) rünnakute vastu, nõudes arendajatelt täpsustamist dataType: "skript" valikuid $ .ajax () ja $ .get () meetodid.

Teisisõnu, kui soovid täita domeenidevahelisi skripti taotlusi, siis peab see kuulutama nende meetodite seadetes.

Dokumendi kohaselt on uus nõue kasulik, kui "kaugel asuv sait pakub mitte-skripti sisu kuid hiljem otsustab teenida skripti, millel on pahatahtlik kavatsus". Muutus ei mõjuta $ .getScript () meetod, kuna see määrab dataType: "skript" selgesõnaliselt.