Újdonságok a jQuery 3 - 10 legmenőbb jellemzői között
A jQuery 3.0, a jQuery új kiadása végül megjelent. A webfejlesztő közösség 2014 októbere óta várta ezt a fontos lépést, amikor a jQuery csapata a mai napig, 2016. júniusáig kezdte meg az új nagy változatot, amikor a végleges kiadás kint van.
A kiadási megjegyzés a karcsúbb és gyorsabb jQuery-val fordított kompatibilitás gondolatban. Ebben a bejegyzésben megnézzük a jQuery 3.0 néhány új funkcióját, hogy áttekintést adjunk arról, hogyan módosítja a JavaScript táját.
Hol kezdjem
Ha szeretné letölteni a jQuery 3.0 programot a kísérletezésre, menjen jobbra a letöltési oldalra. Érdemes megnézni a frissítési útmutatót vagy a forráskódot.
Ha azt szeretné, hogy tesztelje, hogy a meglévő projekt hogyan működik a jQuery 3.0 programmal, akkor megpróbálhatja a jQuery Migrate plugint, amely azonosítja a kód kompatibilitási problémáit. A jövőbeni mérföldköveket is megnézheted.
Ez a cikk nem terjed ki minden a jQuery 3.0 új funkciói, csak a legérdekesebbek: jobb kódminőség, új ECMAScript 6 funkciók integrálása, új API az animációkhoz, új módszer a sztringek elkerülésére, megnövekedett SVG támogatás, jobb aszinkron visszahívások, jobb kompatibilitás az érzékeny webhelyekkel és fokozott biztonság.
1. Eltávolították a régi IE megoldásokat
Az új nagy kiadás egyik fő célja az volt, hogy megteremtse gyorsabb és elegánsabb, ezért a régi hackek és az IE9-hez kapcsolódó megoldások- eltávolították. Ez azt jelenti, hogy az IE6-8 támogatását igényli, vagy tovább kell használnia 1.12 kiadás, akár a 2.x a sorozat nem támogatja teljes mértékben az idősebb Internet Explorereket (IE9-). Nézze meg a dokumentumokban a böngésző támogatásának megjegyzéseit.
Ne feledje, hogy vannak is sok elavult funkció a JQuery-ben 3. A frissítési útmutató nagy hiányossága, hogy az elavult funkciók - 2016. júniusa óta - nem csoportosítva vannak, ezért ha érdekli őket, meg kell keresni őket a böngésző keresőeszközével ( Ctrl + F).
2. jQuery 3.0 Szigorú módban fut
Mivel a jQuery 3 által támogatott böngészők többsége támogatja a szigorú módszert, az új nagy kiadást ez az irányelv szem előtt tartotta.
Bár a jQuery 3-t szigorú módban írták, fontos, hogy ezt tudjuk a kód nem szükséges szigorú módban történő futtatáshoz, Szóval te nem kell átírni a meglévő jQuery kódot, ha a jQuery-re kíván átállítani. 3. Szigorú és nem szigorú mód JavaScript boldogan létezhetnek.
Van egy kivétel: az ASP.NET egyes verziói hogy - a szigorú mód miatt - nem kompatibilis a jQuery 3-mal. Ha részt vesz az ASP.NET-ben, megnézheti az itt található részleteket.
3. A… hurkok esetében be van vezetve
A jQuery 3 támogatja a nyilatkozatot, egy újfajta mert Az ECMAScript 6-ban bevezetett hurok hurok az iterable objektumok felett, például Arrays, Maps és Sets.
A jQuery-ben a … -ig hurok helyettesítheti az előbbit $ .each (…) szintaxis, és könnyebbé teheti a jQuery gyűjtemény elemeinek áthidalását.
Ne feledje, hogy a … -ig hurok akar csak működik vagy olyan környezetben támogatja az ECMAScript 6-ot, vagy ha használjon JavaScript fordítót mint a Babel.
4. Animációk Új API-t kapott
A jQuery 3 az animációk, animációk készítéséhez használja a requestAnimationFrame () API-t simább és gyorsabb. Az új API csak olyan böngészőkben használható, amelyek azt támogatják; régebbi böngészők (azaz IE9) esetén a jQuery korábbi API-t használja az animációk megjelenítéséhez.
RequestAnimationFrame egy darabig kimerült, ha érdekli, hogy mit tud, vagy miért kellene ezt használni, a CSS trükkök jó híreket kapnak róla.
5. Új módszer a sztringek elhagyására speciális jelentéssel
Az új jQuery.escapeSelector () A módszer lehetővé teszi a karakterláncok vagy karakterek menekülését valami mást jelent a CSS-ben annak érdekében, hogy képes legyen használja a jQuery-választóban; anélkül, hogy elmenekülne a JavaScript-tolmács nem tudja megfelelően megérteni.
A dokumentumok segítségével jobban megérthetjük ezt a módszert az alábbi példával:
“Például, ha az oldalon található elemnek van egy azonosítója “abc.def” nem választható ki $ ("# abc.def") mert a szelektor elemezve van “egy elem azonosítóval 'ABC' melynek van egy osztálya is 'Def'. Ez azonban a következővel választható ki $ ("#" + $ .escapeSelector ("abc.def")).”
Nem vagyok biztos benne, hogy milyen gyakran fordul elő ilyen eset, de ha egy ilyen problémába ütközik, most már könnyedén megoldhatja azt.
6. Osztály-manipulációs módszerek támogatása SVG
Sajnos a jQuery 3 még mindig nem támogatja teljes mértékben az SVG-t, hanem a CSS osztályneveket manipuláló jQuery módszerek, például: .addClass () és .hasClass (), most már fel lehet használni SVG-dokumentumok célzása is. Ez azt jelenti, hogy a jQuery segítségével módosíthatja (hozzáadhatja, eltávolíthatja, átkapcsolhatja) vagy megtalálhatja az osztályokat a méretezhető vektoros grafikában, majd az osztályokat a CSS-szel stílusosítsa.
7. A halasztott objektumok most kompatibilisek a JS ígéreteivel
JavaScript ígéretek - használt objektumok aszinkron számításokhoz - az ECMAScript 6-ban standardizálták; viselkedésüket és jellemzőiket a Promises / A + szabványok határozzák meg.
A jQuery 3-ban, Halasztott objektumok összeegyeztethetőek az új Promises / A + szabványokkal. A halasztott adatok láncolható objektumok amely lehetővé teszi visszahívási sorok létrehozása.
Az új funkció megváltozik az aszinkron visszahívási funkciók végrehajtása; ígéretek lehetővé teszi a fejlesztők számára, hogy aszinkron kódot írjanak, amely közelebb áll a szinkron kódhoz.
Lásd a frissítési útmutató kód példáit, vagy nézd meg ezt a nagyszerű Scotch.io bemutatót a JavaScript ígéreteinek alapjairól.
8. jQuery.when () Többnyelvű értelmezéseket értelmez
A $ .Ha () módszert biztosít a visszahívási funkciókat. Az 1.5-ös verzió óta a jQuery része. Ez egy rugalmas módszer; nulla érvekkel is működik, és egy vagy több objektumot is elfogadhat érvként.
A jQuery 3 megváltoztatja a $ .Ha () értelmezik amikor a $ .És () eljárás amellyel további visszahívásokat lehet átadni argumentumokként a $ .Ha () eljárás.
A jQuery 3-ban, ha hozzáad egy bemeneti argumentumot a azután() módszer $ .Ha (), az érv lesz Promise-kompatibilis „akkori” -ként értelmezhető.
Ez azt jelenti, hogy a $ .Ha módszer képes lesz elfogadja a bemenetek határvonalát, mint például a natív ES6 Promises és Bluebird Promises, amelyek lehetővé teszik a kifinomultabb aszinkron visszahívások írását.
9. Új megjelenítés / elrejtés logika
A növekedés érdekében kompatibilis az érzékeny tervezéssel, a kódhoz kapcsolódó kód bemutató és elrejtő elemek frissítve a jQuery 3-ban.
Mostantól a .előadás(), .elrejt(), és .kapcsoló () a módszerek összpontosítanak inline stílusok, a számított stílusok helyett így fognak jobban tiszteletben tartjuk a stíluslap változásait.
Az új kód tiszteletben tartja a kijelző a stíluslapok értékei, amikor csak lehetséges, ami azt jelenti, hogy a CSS szabályai megengedettek dinamikusan változik olyan események esetén, mint az eszköz átirányítása és az ablak átméretezése.
A dokumentumok azt állítják, hogy a legfontosabb eredmény:
"Ennek eredményeképpen a lekapcsolt elemek vannak nem tekinthető rejtettnek hacsak nincs inline kijelző: nincs;, és ezért .kapcsoló () akarat már nem különböztetik meg őket a jQuery 3.0-tól származó csatlakoztatott elemekből. "
Ha jobban meg akarod érteni a az új show / hide logika eredményei, itt egy érdekes Github-beszélgetés.
A jQuery fejlesztők szintén közzétették a Google Dokumentumok táblázatot arról, hogyan fog működni az új viselkedés különböző felhasználási esetekben.
10. Extra védelem az XSS támadások ellen
jQuery 3 hozzáadta egy extra biztonsági réteg a helyszíni Scripting (XSS) támadások ellen, a fejlesztők megkövetelésével dataType: "script" a $ .Ajax () és a $ Szálljon () mód.
Más szavakkal, ha kereszt domaineket tartalmazó parancsfájlokat kíván végrehajtani, akkor ezt nyilatkoznia kell e módszerek beállításaiban.
A dokumentumok szerint az új követelmény akkor hasznos, ha egy "távoli hely nem script tartalmú de később úgy dönt, hogy szolgáljon egy olyan szkriptet, amely rosszindulatú szándékkal rendelkezik". A változás nem befolyásolja a $ .GetScript () módszert, mivel a dataType: "script" opciót.
