Homepage » Coding » Újdonságok a jQuery 3 - 10 legmenőbb jellemzői között

    Ú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.

    jQuery Dokumentumok: Böngésző támogatás

    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).

    jQuery frissítési útmutató

    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.

    Kódpélda a Frissítési útmutatóból

    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.

    www.caniuse.com

    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.

    api.jquery.com

    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.

    Andrew Kerr diavetítése: Helyszíni szkriptek (17. dia)

    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.