Kas naujo „JQuery“ 3 - 10 „Coolest“ funkcijų

jQuery 3.0, naujasis „jQuery“ leidimas pagaliau išleistas. Interneto kūrėjo bendruomenė laukė šio svarbaus žingsnio nuo 2014 m. Spalio mėn., Kai jQuery komanda pradėjo dirbti su nauja pagrindine versija iki 2016 m. Birželio mėn. galutinis išleidimas nėra.

Išleidimo pastaba žada a plonesni ir greičiau jQuery, su atgalinis suderinamumas omenyje. Šiame pranešime apžvelgiame kai kurias naujas „jQuery 3.0“ funkcijas, kad galėtumėte peržiūrėti, kaip jis keičia „JavaScript“ kraštovaizdį.

Kur pradėti

Jei norite atsisiųsti jQuery 3.0, kad galėtumėte patys eksperimentuoti, eikite tiesiai į atsisiuntimo puslapį. Taip pat verta pažvelgti į atnaujinimo vadovą ar šaltinį.

Jei norite išbandyti, kaip jūsų esamas projektas veikia su jQuery 3.0, galite pabandyti į „jQuery Migrate“ papildinį, kuris identifikuoja jūsų kodo suderinamumo problemas. Taip pat galite žiūrėti į būsimus etapus.

Šis straipsnis neapima visi naujos jQuery 3.0 savybės, tik įdomesnės: geresnė kodo kokybė, naujų „ECMAScript 6“ funkcijų integravimas, nauja API animacijoms, naujas metodas pabėgti nuo stygos, padidintas SVG palaikymas, geresni asinchroninio ryšio atsiliepimai, geresnis suderinamumas su reaguojančiomis svetainėmis ir padidintas saugumas.

1. Sunaikinti seni IE šalinimo būdai

Vienas iš svarbiausių naujosios didelės spaudos tikslų buvo tai padaryti greitesnis ir sklandesnis, todėl seni hacks ir problemos, susijusios su IE9- pašalintas. Tai reiškia, kad jei norite ar norite palaikyti IE6-8, turėsite naudoti naujausią 1.12 išleidimas, kaip ir net 2.x serija neturi visiškos paramos senesniems „Internet Explorer“ (IE9-). Peržiūrėkite dokumentuose esančias naršyklės palaikymo pastabas.

Atkreipkite dėmesį, kad taip pat yra daug nuvertintų funkcijų „JQuery“ 3. Didelis „Upgrade Guide“ trūkumas yra tas, kad nebenaudojamos funkcijos - nuo 2016 m. birželio mėn. - nėra sugrupuotos, todėl, jei jus domina, turėsite juos ieškoti naudodami naršyklės paieškos įrankį ( Ctrl + F).

2. jQuery 3.0 Veikia griežtu režimu

Kadangi dauguma „jQuery 3“ palaikomų naršyklių palaiko griežtą režimą, nauja didelė versija buvo sukurta atsižvelgiant į šią direktyvą.

Nors jQuery 3 buvo parašyta griežtu režimu, svarbu tai žinoti jūsų kodas nebūtinas norint paleisti griežtą režimą, taigi jūs nereikia perrašyti savo esamą jQuery kodą, jei norite perkelti į jQuery 3. Griežtas ir ne griežtas „JavaScript“ gali laimingai kartu egzistuoti.

Yra viena išimtis: kai kurios ASP.NET versijos kad dėl griežto režimo yra nesuderinama su jQuery 3. Jei dalyvaujate su ASP.NET, galite peržiūrėti čia esančius duomenis.

3. Įvestas… iš kilpų

jQuery 3 palaiko užrašą „…“, naują dėl „ECMAScript 6“ įdiegta kilpa. Tai suteikia paprastesnį kelią kilpa per iterable objektus, pvz., Arrays, Maps ir Sets.

Į jQuery, už… kilpa gali pakeisti pirmąjį $ .each (…) sintaksė ir gali palengvinti kilpą per jQuery kolekcijos elementus.

Atkreipkite dėmesį, kad už… kilpa veikia tik arba aplinkoje palaiko ECMAScript 6, arba jei jūs naudoti „JavaScript“ kompiliatorių pavyzdžiui, Babelis.

4. Animacijos Turite naują API

jQuery 3 naudoja requestAnimationFrame () API animacijoms atlikti, animacijoms kurti veikia sklandžiau ir greičiau. Naujoji API naudojama tik naršyklėse, kurios ją palaiko; senesnėms naršyklėms (t.y. IE9) jQuery naudoja ankstesnę API kaip atsarginį metodą rodyti animacijas.

RequestAnimationFrame jau kurį laiką, jei jus domina tai, ką ji žino, arba kodėl turėtumėte jį naudoti, CSS gudrybės apie tai gerai.

5. Naujas metodas pabėgti nuo stygų su specialiąja prasme

Nauja jQuery.escapeSelector () metodas leidžia jums pabėgti nuo styginių ar simbolių reiškia kažką kita CSS kad galėtumėte naudoti jQuery-selector; nepaliekant „JavaScript“ vertėjo, jis negali tinkamai suprasti.

Dokumentai padeda geriau suprasti šį metodą, naudojant šį pavyzdį:

“Pvz., Jei puslapio elementas turi ID “abc.def” ji negali būti pasirinkta su $ („# abc.def“) nes selektorius analizuojamas kaip “elementas su ID „abc“ kuri taip pat turi klasę „def“. Tačiau jį galima pasirinkti su $ („#“ + $ .escapeSelector („abc.def“)).”

Nesu tikras, kaip dažnai toks atvejis atsitinka, bet jei įsijungsite į tokią problemą, dabar jūs galite lengvai išspręsti.

6. Klasės manipuliavimo metodų palaikymas SVG

Deja, jQuery 3 vis dar visiškai nepalaiko SVG, bet jQuery metodai, kurie manipuliuoja CSS klasės pavadinimais, pvz .addClass () ir .hasClass (), dabar gali būti naudojamas nukreipti SVG dokumentus taip pat. Tai reiškia, kad galite modifikuoti (pridėti, pašalinti, perjungti) arba rasti klases su jQuery Scalable Vector Graphics, tada stilius klasių su CSS.

7. Atidėtas objektas dabar yra suderinamas su JS pažadais

„JavaScript“ pažadai - naudojami objektai asinchroniniams skaičiavimams - buvo standartizuoti ECMAScript 6; jų elgesys ir ypatybės yra nurodytos Promises / A + standartuose.

JQuery 3, Atidėtas objektas buvo suderinti su naujais Promises / A + standartais. Atidėjimai yra grandinės objektai tai leidžia sukurti atgalinio ryšio eiles.

Nauja funkcija keičiasi kaip vykdomos asinchroninės atgalinio ryšio funkcijos; Pažadai leidžia kūrėjams rašyti asinchroninį kodą, kuris loginiu požiūriu yra arčiau sinchroninio kodo.

Žr. „Upgrade Guide“ kodo pavyzdžius arba peržiūrėkite šį puikų „Scotch.io“ mokymą apie „JavaScript“ pažadų pagrindus.

8. jQuery.when () interpretuoja daugiašalius argumentus kitaip

The $ .when () būdas suteikia galimybę vykdyti atgalinio ryšio funkcijas. Tai dalis jQuery nuo 1.5 versijos. Tai lankstus metodas; jis taip pat veikia su nuliniais argumentais, ir jis taip pat gali priimti vieną ar daugiau objektų kaip argumentus.

jQuery 3 keičia būdą, kaip argumentai $ .when () yra aiškinami kai jie yra $ .then () metodas su kuriais galite perduoti papildomus atšaukimus kaip argumentus $ .when () metodas.

„JQuery 3“, jei pridėsite įvesties argumentą su tada () metodas $ .when (), šis argumentas bus aiškinamas kaip Promise suderinamas „tuometinis“.

Tai reiškia, kad $ .when metodas galės priimti ribotą įėjimų diapazoną, pvz., gimtoji ES6 pažadai ir „Bluebird“ pažadai, leidžiantys rašyti sudėtingesnius asinchroninius grįžtamąjį ryšį.

9. Nauja Rodyti / Slėpti logiką

Norint padidinti suderinamumas su reaguojančiu dizainu, kodą, susijusį su rodyti ir slėpti elementus atnaujinta jQuery 3.

Nuo šiol .Rodyti(), .paslėpti (), ir .perjungti () dėmesys bus skiriamas metodams inline stiliai, vietoj apskaičiuotų stilių, tokiu būdu jie bus geriau gerbti stilių lapo pakeitimus.

Naujasis kodas gerbia ekranas stilių lapų vertes, kai tik tai įmanoma, o tai reiškia, kad CSS taisyklės gali dinamiškai keičiasi įvykius, pvz., įrenginio perorientavimą ir lango dydį.

Dokumentuose teigiama, kad svarbiausias rezultatas bus:

„Dėl to yra atjungti elementai nebėra laikoma paslėpta nebent jie turi inline ekranas: nėra;, ir todėl .perjungti () valia nebesiskiria iš prijungtų elementų kaip ir jQuery 3.0. "

Jei norite geriau suprasti naujojo rodymo / slėpimo logikos rezultatai, čia yra įdomi Githubo diskusija apie tai.

jQuery kūrėjai taip pat paskelbė „Google“ dokumentų lentelę apie tai, kaip veiks naujas elgesys skirtingais naudojimo atvejais.

10. Papildoma apsauga nuo XSS atakų

jQuery 3 pridėta papildomas saugumo sluoksnis prieš „Cross-Site Scripting“ (XSS) išpuolius, reikalaujant, kad kūrėjai nurodytų dataType: „scenarijus“ . \ t $ .ajax () ir $ .get () metodus.

Kitaip tariant, jei norite vykdyti tarpdomenų scenarijų užklausas, jūs turi tai paskelbti šių metodų nustatymuose.

Remiantis dokumentais, naujas reikalavimas yra naudingas, kai „nuotolinė svetainė pateikia ne scenarijų turinį bet vėliau nusprendžia aptarnauti scenarijų, turintį kenksmingą ketinimąŠis pakeitimas neturi įtakos $ .getScript () metodas, nes jis nustato dataType: „scenarijus“ pasirinkimą.