Domovská » Kódování » Co je nového v jQuery 3 - 10 Coolest Features

    Co je nového v jQuery 3 - 10 Coolest Features

    jQuery 3.0, nové hlavní vydání jQuery konečně bylo vydáno. Komunita web developerů čekala na tento důležitý krok od října 2014, kdy tým jQuery začal pracovat na nové hlavní verzi až do června 2016, kdy konečné vydání je venku.

    Oznámení o vydání slibuje a štíhlejší a rychlejší jQuery, s zpětné kompatibility na mysli. V tomto příspěvku se podíváme na některé nové funkce produktu jQuery 3.0, abychom vám poskytli přehled o tom, jak mění krajinu JavaScript..

    Kde začít

    Chcete-li si stáhnout jQuery 3.0 a experimentovat sami, přejděte přímo na stránku ke stažení. Také stojí za to se podívat na Průvodce aktualizací nebo zdrojový kód.

    Pokud chcete otestovat, jak váš stávající projekt pracuje s jQuery 3.0, můžete zkusit plugin jQuery Migrate, který identifikuje problémy s kompatibilitou ve vašem kódu. Můžete také nahlédnout do budoucích milníků.

    Tento článek nepokrývá Všechno nové funkce jQuery 3.0, pouze ty zajímavější: lepší kvalita kódu, integrace nových funkcí ECMAScript 6, nové API pro animace, nová metoda pro únik řetězců, zvýšená podpora SVG, lepší zpětné volání async, lepší kompatibilita s responzivními stránkami a zvýšená bezpečnost.

    1. Stará řešení IE byla odstraněna

    Jedním z hlavních cílů nového hlavního vydání bylo, aby se to stalo rychlejší a hladší, proto staré hacky a řešení související s IE9- odstraněn. To znamená, že pokud chcete nebo potřebujete podporovat IE6-8, budete muset používat nejnovější 1.12 vydání, stejně jako 2.x série nemá plnou podporu pro starší Internet Explorers (IE9-). Podívejte se na poznámky k podpoře prohlížeče v dokumentech.

    jQuery Docs: Podpora prohlížeče

    Všimněte si, že existují také mnoho zastaraných funkcí v jQuery 3. Velkým nedostatkem Průvodce aktualizací je, že zastaralé funkce - od června 2016 - nejsou seskupeny, takže pokud se o ně zajímáte, budete je muset vyhledat pomocí vyhledávacího nástroje svého prohlížeče ( Ctrl + F).

    jQuery Upgrade Guide

    2. jQuery 3.0 Spustí se v přísném režimu

    Vzhledem k tomu, že většina prohlížečů podporovaných jQuery 3 podporuje přísný režim, nová hlavní verze byla vytvořena s ohledem na tuto směrnici.

    Ačkoli jQuery 3 byl napsán v přísném režimu, je důležité to vědět Váš kód není nutný pro provoz v přísném režimu, takže ty nepotřebujete přepisovat Váš stávající kód jQuery, pokud chcete přejít na jQuery 3. Přísný a nekomplikovaný JavaScript mohou šťastně koexistovat.

    Existuje jedna výjimka: některé verze ASP.NET že - kvůli přísnému režimu - jsou není kompatibilní s jQuery 3. Pokud se zabýváte technologií ASP.NET, můžete se podívat na podrobnosti zde v dokumentech.

    3. Pro… smyček je zaveden

    jQuery 3 podporuje pro… prohlášení, nový druh pro smyčka, zavedená v ECMAScript 6. Poskytuje přímější cestu smyčka přes iterovatelné objekty, např. pole, mapy a sady.

    V jQuery, pro… z smyčka může nahradit první $ .each (…) Syntaxe a může usnadnit smyčku prostřednictvím prvků kolekce jQuery.

    Příklad kódu z Průvodce aktualizací

    Všimněte si, že pro… z smyčka pracovat buď v prostředí, které podporuje ECMAScript 6, nebo pokud používat překladač JavaScriptu jako je Babel.

    4. Animace Máte nové API

    jQuery 3 používá API API requestAnimationFrame () pro provádění animací a vytváření animací plynule a rychleji. Nové rozhraní API se používá pouze v prohlížečích, které jej podporují; pro starší prohlížeče (tj. IE9) používá jQuery své předchozí API jako záložní metodu pro zobrazení animací.

    RequestAnimationFrame byl nějaký čas venku, pokud máte zájem o to, co ví nebo proč byste jej měli používat, CSS Tricks má o tom dobrý příspěvek.

    www.caniuse.com

    5. Nová metoda pro únik strun se zvláštním významem

    Nové jQuery.escapeSelector () Metoda umožňuje uniknout řetězce nebo znaky, které znamená něco jiného v CSS aby bylo možné použít v jQuery-selector; bez úniku z JavaScriptového tlumočníka to nedokáže správně pochopit.

    Dokumenty nám pomáhají lépe porozumět této metodě pomocí následujícího příkladu:

    Pokud má například prvek na stránce ID “a B c d e f” nelze vybrat pomocí $ ("# abc.def") protože je volič analyzován jako “prvek s id 'abc' který má také třídu 'def'. Lze však vybrat pomocí $ ("#" + $ .escapeSelector ("abc.def")).”

    Nejsem si jistý, jak často se takový případ děje, ale pokud narazíte na takový problém, máte nyní snadný způsob, jak jej rychle vyřešit..

    6. Podpora metod manipulace s třídou SVG

    Bohužel, jQuery 3 stále nepodporuje SVG, ale metody jQuery, které manipulují s názvy třídy CSS, jako například .addClass () a .hasClass (), nyní lze použít cílové SVG dokumenty také. To znamená, že můžete upravit (přidat, odebrat, přepnout) nebo najít třídy pomocí jQuery v Scalable Vector Graphics, pak styl tříd s CSS.

    7. Odložené objekty jsou nyní kompatibilní se sliby JS

    Sliby JavaScriptu - použité objekty pro asynchronní výpočty - byly standardizovány v ECMAScript 6; jejich chování a vlastnosti jsou specifikovány ve standardech Promises / A +.

    V jQuery 3, Odložené objekty jsou kompatibilní s novými standardy Promises / A +. Odpisy jsou řetězitelné objekty které umožňují vytvořit fronty zpětného volání.

    Nová funkce se změní jak jsou prováděny asynchronní funkce zpětného volání; Sliby umožňují vývojářům psát asynchronní kód, který je blíže v logice k synchronnímu kódu.

    Podívejte se na příklady kódu z Průvodce aktualizací nebo se podívejte na tento skvělý tutoriál Scotch.io o základech příslibů JavaScriptu.

    8. jQuery.when () Interpretuje více argumenty odlišně

    $ .when () Metoda poskytuje způsob provádět funkce zpětného volání. Je to součást jQuery od verze 1.5. Je to flexibilní metoda; také pracuje s nulovými argumenty a jako argumenty může přijmout jeden nebo více objektů.

    jQuery 3 mění způsob, jakým argumenty $ .when () jsou interpretovány když obsahují $ .then () metoda s kterými můžete předat další zpětná volání jako argumenty $ .when () metoda.

    api.jquery.com

    Pokud jQuery 3 přidáte vstupní argument pomocí pak() metodu $ .when (), argument bude interpretováno jako Promable-kompatibilní "thenable".

    To znamená, že $ .when způsob přijmout vstupní hranice, jako jsou nativní přísliby ES6 a sliby Bluebird, které umožňují psát sofistikovanější asynchronní zpětná volání.

    9. Nová Show / Hide Logic

    Aby se zvýšila kompatibilita s citlivým designem, kód vztahující se k zobrazení a skrytí prvků byl aktualizován v jQuery 3.

    Od teď .show(), .skrýt(), a .přepnout () metody se zaměří na inline styly, místo vypočítaných stylů, tak budou lépe respektovat změny stylů.

    Nový kód respektuje Zobrazit hodnoty stylů vždy, když je to možné, což znamená, že pravidla CSS mohou dynamicky měnit na události, jako je přesměrování zařízení a změna velikosti okna.

    Dokumenty tvrdí, že nejdůležitějším výsledkem bude:

    "V důsledku toho jsou odpojené prvky již nejsou považovány za skryté pokud nemají inline displej: žádný;, a proto .přepnout () vůle již je nerozlišují z propojených prvků jako jQuery 3.0. "

    Pokud chcete lépe porozumět výsledky nové logiky show / hide, Zde je zajímavá Githubova diskuse.

    Vývojáři jQuery také zveřejnili tabulku Dokumentů Google o tom, jak bude nové chování fungovat v různých případech použití.

    10. Extra ochrana proti útokům XSS

    jQuery 3 přidáno další bezpečnostní vrstvu proti útokům skriptování přes web (XSS) vyžaduje, aby vývojáři specifikovali dataType: "script" v možnostech $ .ajax () a $ .get () metody.

    Jinými slovy, pokud chcete provést požadavky skriptů mezi doménami, vy to musí deklarovat nastavení těchto metod.

    Slideshare by Andrew Kerr: Skriptování napříč stránkami (snímek 17)

    Podle dokumentů je nový požadavek užitečný, když je "vzdálený web" dodává ne-skriptový obsah ale později se rozhodne slouží skriptu, který má zlý úmyslZměnu neovlivní $ .getScript () způsob, jakým nastavuje dataType: "script" možnost explicitně.