Co nowego w jQuery 3 - 10 najfajniejszych funkcji
jQuery 3.0, nowa wielka wersja jQuery wreszcie została wydana. Społeczność twórców stron internetowych czekała na ten ważny krok od października 2014 r., Kiedy zespół jQuery zaczął pracować nad nową wersją główną do czerwca 2016 r., Kiedy wersja ostateczna jest nieobecny.
Notatka prasowa obiecuje cieńszy i szybszy jQuery, z kompatybilność wsteczna w myślach. W tym poście przyjrzymy się niektórym nowym funkcjom jQuery 3.0, aby uzyskać przegląd zmian w krajobrazie JavaScript.
Gdzie zacząć
Jeśli chcesz pobrać jQuery 3.0, aby eksperymentować samodzielnie, przejdź do strony pobierania. Warto także zapoznać się z Przewodnikiem aktualizacji lub kodem źródłowym.
Jeśli chcesz przetestować, jak działa Twój istniejący projekt z jQuery 3.0, możesz spróbować wtyczki jQuery Migrate, która identyfikuje problemy ze zgodnością w kodzie. Możesz także zajrzeć do przyszłych kamieni milowych.
Ten artykuł nie obejmuje wszystko nowe funkcje jQuery 3.0, tylko te bardziej interesujące: lepsza jakość kodu, integracja nowych funkcji ECMAScript 6, nowe API dla animacji, nowa metoda ucieczki ciągów, zwiększona obsługa SVG, ulepszone asynchroniczne wywołania zwrotne, lepsza kompatybilność z responsywnymi stronami i zwiększone bezpieczeństwo.
1. Usunięto stare rozwiązania IE
Jednym z głównych celów nowej wersji głównej było stworzenie tego szybszy i bardziej elegancki, dlatego stare hacki i obejścia związane z IE9- został usunięty. Oznacza to, że jeśli chcesz lub potrzebujesz obsługi IE6-8, będziesz musiał korzystać z najnowszych 1.12 wydać, nawet 2.x Seria nie ma pełnego wsparcia dla starszych Internet Explorerów (IE9-). Sprawdź notatki dotyczące obsługi przeglądarki w dokumentach.
Zauważ, że są też wiele przestarzałych funkcji w jQuery 3. Dużą wadą przewodnika aktualizacji jest to, że przestarzałe funkcje - od czerwca 2016 r. - nie są zgrupowane, więc jeśli jesteś nimi zainteresowany, musisz je wyszukać za pomocą narzędzia wyszukiwania w przeglądarce ( Ctrl + F).
2. jQuery 3.0 działa w trybie ścisłym
Ponieważ większość przeglądarek obsługiwanych przez jQuery 3 obsługuje tryb ścisły, nowa wersja główna została zbudowana z myślą o tej dyrektywie.
Chociaż jQuery 3 został napisany w trybie ścisłym, ważne jest, aby o tym wiedzieć Twój kod nie musi działać w trybie ścisłym, więc ty nie musisz przepisywać istniejący kod jQuery, jeśli chcesz przeprowadzić migrację do jQuery 3. JavaScript w trybie ścisłym i nie ściśle może szczęśliwie współistnieć.
Jest jeden wyjątek: niektóre wersje ASP.NET że - ze względu na tryb ścisły - są nie jest kompatybilny z jQuery 3. Jeśli jesteś zaangażowany w ASP.NET, możesz przejrzeć szczegóły w dokumentach.
3. Wprowadzono pętlę……
jQuery 3 obsługuje nowy zestaw instrukcji… dla pętli, wprowadzone w ECMAScript 6. Daje to prostszy sposób pętla nad obiektami iterowalnymi, takie jak tablice, mapy i zestawy.
W jQuery, the za… z pętla może zastąpić pierwszą $ .each (…) składnia i może ułatwić przechodzenie przez elementy kolekcji jQuery.
Zauważ, że za… z będzie pętla tylko praca albo w takim środowisku obsługuje ECMAScript 6, lub jeśli ty użyj kompilatora JavaScript takie jak Babel.
4. Animacje Masz nowy interfejs API
jQuery 3 używa API requestAnimationFrame () do wykonywania animacji, tworzenia animacji działać płynniej i szybciej. Nowy interfejs API jest używany tylko w przeglądarkach, które go obsługują; dla starszych przeglądarek (tj. IE9) jQuery używa swojego poprzedniego API jako metody awaryjnej do wyświetlania animacji.
RequestAnimationFrame już od jakiegoś czasu nie działa, jeśli jesteś zainteresowany tym, co wie lub dlaczego powinieneś go używać, CSS Tricks ma o tym dobry post.
5. Nowa metoda ucieczki ciągów o specjalnym znaczeniu
Nowa jQuery.escapeSelector () metoda pozwala na uniknięcie ciągów znaków lub znaków znaczy coś innego w CSS aby móc użyj go w selektorze jQuery; bez ucieczki interpreter JavaScript nie może go poprawnie zrozumieć.
Dokumenty pomagają nam lepiej zrozumieć tę metodę w następującym przykładzie:
“Na przykład, jeśli element na stronie ma identyfikator “Alfabet” nie można go wybrać za pomocą $ ("# abc.def") ponieważ selektor jest analizowany jako “element o identyfikatorze 'ABC' który również ma klasę „def”. Można go jednak wybrać za pomocą $ („#” + $ .escapeSelector („abc.def”)).”
Nie jestem pewien, jak często zdarza się taki przypadek, ale jeśli wpadniesz na taki problem, teraz masz łatwy sposób, aby szybko go naprawić.
6. Metody manipulacji klasami Obsługa SVG
Niestety, jQuery 3 nadal nie obsługuje w pełni SVG, ale metody jQuery, które manipulują nazwami klas CSS, takie jak .addClass () i .hasClass (), teraz można się do tego przyzwyczaić docelowe dokumenty SVG także. Oznacza to, że możesz modyfikować (dodawać, usuwać, przełączać) lub znajdować klasy za pomocą jQuery w skalowalnej grafice wektorowej, następnie styluj klasy za pomocą CSS.
7. Odroczone obiekty są teraz kompatybilne z JS Promises
Obietnice JavaScript - używane obiekty do obliczeń asynchronicznych - zostały ujednolicone w ECMAScript 6; ich zachowanie i funkcje są określone w standardach Promises / A +.
W jQuery 3, Odroczone obiekty zostały kompatybilne z nowymi standardami Promises / A +. Odroczone są obiekty łańcuchowe to umożliwia tworzyć kolejki zwrotne.
Nowa funkcja zmienia się jak wykonywane są asynchroniczne funkcje zwrotne; Obietnice pozwala programistom na pisanie kodu asynchronicznego, który jest bardziej logiczny niż kod synchroniczny.
Zobacz przykłady kodu z Przewodnika aktualizacji lub zapoznaj się z tym świetnym samouczkiem Scotch.io dotyczącym podstaw obietnic JavaScript.
8. jQuery.when () Inaczej interpretuje wiele argumentów
The $ .when () metoda zapewnia sposób wykonywać funkcje zwrotne. Jest częścią jQuery od wersji 1.5. Jest to elastyczna metoda; działa również z zerowymi argumentami i może akceptować jeden lub więcej obiektów jako argumenty.
jQuery 3 zmienia sposób, w jaki argumenty $ .when () są interpretowane kiedy zawierają $ .then () metoda za pomocą którego możesz przekazywać dodatkowe wywołania zwrotne jako argumenty $ .when () metoda.
W jQuery 3, jeśli dodasz argument wejściowy za pomocą następnie() metoda do $ .when (), argument będzie zinterpretowany jako zgodny z Promise „thenable”.
Oznacza to, że $. kiedy metoda będzie w stanie zaakceptować zakres wejść, takie jak natywne obietnice ES6 i obietnice Bluebird, które umożliwiają pisanie bardziej zaawansowanych asynchronicznych wywołań zwrotnych.
9. New Show / Hide Logic
W celu zwiększenia zgodność z responsywnym projektem, kod związany z pokazywanie i ukrywanie elementów został zaktualizowany w jQuery 3.
Od teraz .pokazać(), .ukryć(), i .przełącznik() skupią się na metodach style inline, zamiast stylów obliczonych, tak będą lepiej szanuj zmiany arkusza stylów.
Nowy kod szanuje pokaz wartości arkuszy stylów, gdy tylko jest to możliwe, co oznacza, że reguły CSS mogą dynamicznie się zmieniać na zdarzenia takie jak zmiana orientacji urządzenia i zmiana rozmiaru okna.
Dokumenty potwierdzają, że najważniejszym wynikiem będzie:
„W rezultacie odłączone elementy są nie jest już uważany za ukryty chyba że mają inline Nie wyświetla się;, i dlatego .przełącznik() będzie już ich nie różnicuje z połączonych elementów jak w jQuery 3.0. ”
Jeśli chcesz lepiej zrozumieć wyniki nowej logiki show / hide, oto ciekawa dyskusja na ten temat w Github.
Deweloperzy jQuery opublikowali także tabelę Dokumentów Google o tym, jak nowe zachowanie będzie działać w różnych przypadkach użycia.
10. Dodatkowa ochrona przed atakami XSS
Dodano jQuery 3 dodatkowa warstwa bezpieczeństwa przeciwko atakom Cross-Site Scripting (XSS), wymagając od programistów określenia dataType: „skrypt” w opcjach $ .ajax () i $ .get () metody.
Innymi słowy, jeśli chcesz wykonywać żądania skryptów między domenami, Ty musi to zgłosić w ustawieniach tych metod.
Według dokumentów nowy wymóg jest przydatny, gdy jest to „zdalna witryna dostarcza treści bez skryptów ale później postanawia służyć skryptowi, który ma złośliwe zamiary„. Zmiana nie wpływa na $ .getScript () metoda, ponieważ ustawia dataType: „skrypt” opcja wyraźnie.
