15 Zaawansowane techniki JavaScript każdy programista powinien wiedzieć
- 2004
- 617
- Juliusz Janicki
JavaScript to wszechstronny i potężny język programowania, który był szeroko stosowany w opracowywaniu aplikacji internetowych. Jako programista niezbędne jest zrozumienie możliwości języka i zaawansowanych technik, aby tworzyć solidne, wydajne i skalowalne aplikacje internetowe.
Oto 15 zaawansowanych technik JavaScript, które każdy programista powinien wiedzieć.
1. Domknięcia
Zamknięcie jest potężną techniką w JavaScript, która pozwala tworzyć funkcje w stanie trwałym. Zasadniczo zamknięcie jest funkcją, która „pamięta” środowisko, w którym zostało utworzone. Może to być przydatne do tworzenia zmiennych prywatnych, a także do tworzenia funkcji, które można użyć do generowania innych funkcji.
Na przykład:
funkcja licznika () Let Count = 0; return funkcja () return ++ count; const c = licznik (); konsola.log (c ()); // 1 konsola.log (c ()); // 2 konsola.log (c ()); // 3| 1234567891011 | funkcja licznika () Let Count = 0; return funkcja () return ++ count; const c = licznik (); konsola.log (c ()); // 1 Console.log (c ()); // 2solesol.log (c ()); // 3 |
W powyższym przykładzie funkcja licznika zwraca funkcję, która ma dostęp do zmiennej liczby w swoim zewnętrznym zakresie. Za każdym razem, gdy zwrócona funkcja jest wywoływana, zwiększa zmienną liczby i zwraca jej wartość.
2. Currying
Currying to technika, w której funkcja z wieloma argumentami jest przekształcana w serię funkcji, w których każda bierze jeden argument. Może to być przydatne do tworzenia bardziej modułowego kodu, a także do tworzenia funkcji, które można ponownie wykorzystać w różnych kontekstach.
Na przykład:
funkcja add (a, b) return a + b; funkcja curryadd (a) return funkcja (b) return add (a, b); const add5 = curryadd (5); konsola.log (add5 (10)); // 15| 123456789101112 | funkcja add (a, b) return a + b; funkcja curryadd (a) return funkcja (b) return add (a, b); const add5 = curryadd (5); konsola.log (add5 (10)); // 15 |
W powyższym przykładzie funkcja dodawania jest przekształcana w funkcję curry za pomocą funkcji curryadd. Funkcja curryadd bierze pierwszy argument A i zwraca nową funkcję, która przyjmuje drugi argument B i wywołuje oryginalną funkcję dodawania obu argumentów.
3. Pamięć
Memoization to technika optymalizacji wykonywania funkcji poprzez buforowanie wyników drogich obliczeń. Może to być przydatne w przypadku funkcji, które są często nazywane lub które zajmują dużo czasu.
Na przykład:
funkcja fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(… args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci); console.log(memoizedFibonacci(10)); // 55| 12345678910111213141516171819202122 | funkcja fibonacci (n) if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); function memoize(func) const cache = ; return function(...args) const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = func.apply(this, args); cache[key] = result; return result; const memoizedFibonacci = memoize(fibonacci);console.log(memoizedFibonacci(10)); // 55 |
W powyższym przykładzie funkcja Memoize ma funkcję FUNC i zwraca nową funkcję, która buforuje wynik oryginalnego wywołania funkcji na podstawie jego parametrów wejściowych. Następnym razem, gdy funkcja zostanie wywołana z tymi samymi parametrami wejściowymi, zwraca wynik buforowany zamiast wykonywania oryginalnej funkcji.
4. Dławianie
Dławianie to technika, w której funkcja jest wykonywana co najwyżej raz w określonym przedziale czasowym. Może to pomóc w ograniczeniu liczby razy funkcji i poprawić wydajność aplikacji.
Na przykład:
Funkcja przepustnica (func, opóźnienie) niech lastCall = 0; Funkcja return (… args) const now = new Date ().uzyskać czas(); if (teraz - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling'); , 100));| 123456789101112131415 | Funkcja przepustnica (func, opóźnienie) niech lastCall = 0; Funkcja powrotu (...args) const now = new Date ().uzyskać czas(); if (teraz - LastCall < delay) return; lastCall = now; func.apply(this, args); window.addEventListener('scroll', throttle(function() console.log('scrolling');, 100)); |
W powyższym przykładzie funkcja przepustnicy ma funkcję FUNC i opóźnienie przedziału czasu jako argumenty i zwraca nową funkcję, która wykonuje FUNC co najwyżej raz na opóźnienie milisekund.
W powyższym przykładzie słuchacz zdarzenia przewijania jest owinięty funkcją przepustnicy, która ogranicza liczbę razy konsolę.Instrukcja log („Scrolling”) jest wykonywana podczas przewijania.
5. Debuin
Debuina jest techniką, w której funkcja jest opóźniona, dopóki określony przedział czasowy upłynął po ostatnim wywołaniu. Może to pomóc w zmniejszeniu liczby razy funkcji i poprawić wydajność aplikacji.
Na przykład:
funkcja debunce (func, opóźnienie) let timerId; return funkcja (… args) if (timerId) cleartimeout (timerId); timerId = settimeout (() => func.Zastosuj (to, args); timerid = null; , opóźnienie); okno.addEventListener („rozmiar”, debunce (function () konsola.log („rozmiar”); , 500));| 12345678910111213141516 | funkcja debunce (func, opóźnienie) let timerId; Funkcja powrotu (...args) if (timerId) cleartimeout (timerId); timerId = settimeout (() => func.Zastosuj (to, args); timerid = null; , opóźnienie); okno.addEventListener („rozmiar”, debunce (function () konsola.log („rozmiar”);, 500)); |
W powyższym przykładzie funkcja debuncji wymaga funkcji FUNC i opóźnienia przedziału czasu jako argumenty i zwraca nową funkcję, która opóźnia wykonywanie FUNC, dopóki opóźnienie miną od czasu ostatniego wywołania.
W powyższym przykładzie słuchacz zdarzeń rozmiar.Instrukcja log („rozmiar”) jest wykonywana podczas rozmiaru okna.
6. Obietnice
Obietnice są sposobem na zarządzanie kodem asynchronicznym w JavaScript. Są zasadniczo symbolem zastępczym dla wartości, która może nie być jeszcze dostępna, ale będą w przyszłości. Można użyć obietnic, aby upewnić się, że pewien kod działa dopiero po zakończeniu innego kodu, a także można je użyć do obsługi błędów w bardziej elegancki sposób niż tradycyjne obsługę błędów.
Na przykład:
funkcja fetchData () return new obieca ((rozdzielcz, odrzuć) => fetch ('https: // przykład.com/data ') .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (data => rozdziel (dane)) .catch (error => odrzuć (błąd)); ); fetchData () .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd));| 123456789101112 | funkcja fetchData () return new obieca ((rozdzielcz, odrzuć) => fetch ('https: // przykład.com/data ') .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (data => rozdziel (dane)) .catch (error => odrzuć (błąd)); ); fetchData () .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd)); |
W powyższym przykładzie funkcja fetchData zwraca obietnicę, która rozwiązuje dane pobierane z https: // przykład.com/dane. Obietnica jest następnie zużywana przy użyciu metod wówczas i połowów w celu obsługi rozwiązanych danych i wszelkich występujących błędów.
7. Asynchronizacja/oczekiwanie
Async/Atah to cukier składniowy oprócz obietnic, który pozwala napisać kod asynchroniczny, który wygląda jak kod synchroniczny. Może to sprawić, że kod asynchroniczny jest bardziej czytelny i łatwiejszy do utrzymania.
Na przykład:
Async funkcja fetchData () try const resper = czekali na fetch ('https: // przykład.com/data '); Const Data = czekaj na odpowiedź.JSON (); Dane zwrotne; catch (error) rzuć nowy błąd (błąd); fetchData () .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd));| 12345678910111213 | Async funkcja fetchData () try const resper = czekali na fetch ('https: // przykład.com/data '); Const Data = czekaj na odpowiedź.JSON (); Dane zwrotne; catch (error) rzuć nowy błąd (błąd); fetchData () .Następnie (dane => konsola.log (dane)) .Catch (błąd => konsola.błąd (błąd)); |
W powyższym przykładzie funkcja fetchData jest zadeklarowana za pomocą słowa kluczowego asynchronizacji i wykorzystuje słowo kluczowe czekające na rozstrzygniętą wartość obietnic zwróconych przez pobieranie i odpowiedź.Metody JSON. Wszelkie błędy są złapane za pomocą bloku prób/catch.
8. Generatory
Generatory są potężną funkcją w JavaScript, która umożliwia zatrzymanie i wznowienie wykonania funkcji, przy jednoczesnym utrzymaniu jej stanu wewnętrznego. Może to być przydatne w różnych aplikacjach, od programowania asynchronicznego po iteratory budowlane.
Oto przykład, w jaki sposób możesz użyć generatora do zbudowania iteratora, który generuje nieskończoną sekwencję liczb Fibonacciego:
funkcja* fibonacci () let [prev, curr] = [0, 1]; while (true) plon curr; [prev, curr] = [Curr, prev + curr]; const fib = fibonacci (); konsola.Log (fib.Następny().wartość); // logów 1 konsola.Log (fib.Następny().wartość); // logów 1 konsola.Log (fib.Następny().wartość); // logów 2 konsola.Log (fib.Następny().wartość); // Logs 3 konsola.Log (fib.Następny().wartość); // Logów 5| 123456789101112131415 | funkcja* fibonacci () let [prev, curr] = [0, 1]; while (true) plon curr; [prev, curr] = [Curr, prev + curr]; const fib = fibonacci (); konsola.Log (fib.Następny().wartość); // dzienniki 1Console.Log (fib.Następny().wartość); // dzienniki 1Console.Log (fib.Następny().wartość); // dzienniki 2Console.Log (fib.Następny().wartość); // Logów 3Console.Log (fib.Następny().wartość); // Logów 5 |
W tym przykładzie funkcja Fibonacciego jest deklarowana jako funkcja generatora za pomocą składni funkcji*. Funkcja wykorzystuje pętlę while do wygenerowania nieskończonej sekwencji liczb Fibonaccie. Zmienna FIB jest następnie inicjowana jako obiekt iterator za pomocą funkcji fibonacci (), a każde kolejne wywołanie do następnej metody () generuje następny numer w sekwencji.
9. Operator rozprzestrzeniania się
Operator rozprzestrzeniania się, oznaczony trzema kropkami (…), jest potężną funkcją w JavaScript, która pozwala rozwinąć obiekt iteralny (jak tablica lub ciąg) na poszczególne elementy. Można tego użyć do uproszczenia i usprawnienia kodu na wiele sposobów.
Oto przykład, w jaki sposób możesz użyć operatora rozprzestrzeniania się do połączenia dwóch tablic:
const arr1 = [1, 2, 3]; const ar2 = [4, 5, 6]; const arr3 = [… ARR1,… ARR2]; konsola.log (ARR3); // dzienniki [1, 2, 3, 4, 5, 6]| 12345 | const arr1 = [1, 2, 3]; const ar2 = [4, 5, 6]; const arr3 = [...ARR1, ...arr2]; konsola.log (ARR3); // dzienniki [1, 2, 3, 4, 5, 6] |
W tym przykładzie operator rozprzestrzeniania służy do połączenia ARR1 i ARR2 w nową tablicę ARR3. Składnia… ARR1 rozszerza tablicę ARR1 na poszczególne elementy, które są następnie połączone z… ARR2 Składnią.
10. Funkcje wyższego rzędu
Funkcja wyższego rzędu jest funkcją, która zajmuje inną funkcję jako argument lub w rezultacie zwraca funkcję. Może to być przydatne do tworzenia kodu wielokrotnego użytku, który można dostosować do różnych przypadków użycia.
funkcja mnożenie (współczynnik) return funkcja (numer) Numer zwracania * współczynnik; ; const double = mnożenie (2); const potrójny = mnożenie (3); konsola.log (podwójne (5)); // logów 10 konsoli.Log (Triple (5)); // Logów 15| 1234567891011 | funkcja mnożenie (współczynnik) return funkcja (numer) Numer zwracania * współczynnik; ; const double = multiplyby (2); const potrójny = mnożenie (3); konsola.log (podwójne (5)); // Logów 10 Console.Log (Triple (5)); // Logów 15 |
W tym przykładzie funkcja mnożnika zwraca inną funkcję, która mnoży daną liczbę przez określony współczynnik. Zwróconą funkcję można użyć do tworzenia innych funkcji, które mnożą się przez różne czynniki.
11. Destrukcja
Niszczenie to sposób na wyodrębnienie wartości z obiektów lub tablic w bardziej zwięzły sposób. Może to być szczególnie przydatne w przypadku złożonych struktur danych, ponieważ pozwala szybko i łatwo wyodrębnić potrzebne wartości.
const person = Nazwa: „John”, wiek: 30, Adres: Street: „123 Main St”, miasto: „Anytown”, State: „Ca”, Zip: „12345”; const Nazwa, wiek, adres: City = osoba; konsola.log (nazwa); // konsola „John”.dziennik (wiek); // 30 konsoli.Log (miasto); // „Anytown”| 12345678910111213141516 | const person = Nazwa: „John”, wiek: 30, Adres: Street: „123 Main St”, miasto: „Anytown”, State: „Ca”, Zip: „12345”; const Nazwa, wiek, adres: City = osoba; konsola.log (nazwa); // 'John'Console.dziennik (wiek); // 30 CONSOLE.Log (miasto); // „Anytown” |
W tym przykładzie niszczymy obiekt osoby, aby wyodrębnić nazwę, wiek i właściwości miasta i przypisywać je do zmiennych.
12. Delegacja wydarzenia
Delegacja zdarzeń jest techniką obsługi zdarzeń, w których do elementu nadrzędnego jest przymocowany do elementu nadrzędnego, a nie do każdego elementu dziecka. Może to być przydatne do poprawy wydajności obsługi zdarzeń, a także do obsługi zdarzeń na dynamicznie generowanych treściach.
- Przedmiot 1
- Pozycja 2
- Pozycja 3
| 123456789101112131415 |
|
W tym przykładzie dołączamy słuchacz zdarzeń kliknięcia do elementu UL, a następnie korzystamy z zdarzenia.Właściwość docelowa, aby ustalić, który element Li został kliknięty. Jest to przydatne do obsługi zdarzeń dotyczących treści dynamicznej, które można dodać lub usunąć ze strony.
13. Kurly Bracket Używanie
W JavaScript nawiasy kręcone są używane do wyznaczania bloków kodu. Można je jednak również używać w bardziej zwięzły sposób do tworzenia obiektów lub do niszczenia obiektów. Może to być szczególnie przydatne podczas pracy ze złożonymi strukturami danych.
funkcja myFunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y');| 12345678910 | funkcja myFunction () const x = 1; const y = 2; if (x < y) console.log('x is less than y'); else console.log('x is greater than or equal to y'); |
W tym przykładzie używamy nawiasów kręconych do zdefiniowania ciała funkcji myfunkcji i instrukcji IF.
14. Moduły JavaScript
Moduły JavaScript to sposób na zorganizowanie kodu w jednostki wielokrotnego użytku, samodzielne. Mogą być używane do kapsułkowania funkcjonalności i do tworzenia bardziej utrzymanego kodu.
// moduł 1.JS Export Funkcja Add (a, b) return a + b; // module2.js import add z './moduł 1.js '; const sum = add (2, 3); konsola.log (suma); // 5| 1234567891011 | // moduł 1.JSEXPORT FUNKCJA Dodaj (a, b) return a + b; // module2.jsimport add z './moduł 1.js '; const sum = add (2, 3); konsola.log (suma); // 5 |
W tym przykładzie wyeksportujemy funkcję dodawania z modułu1.JS, a następnie importowanie go do modułu2.JS za pomocą instrukcji importu. To pozwala nam ponownie wykorzystać funkcję dodawania w różnych częściach naszego kodu.
15. Funkcje strzałek
Funkcje strzałek to zwięzły sposób zdefiniowania funkcji w JavaScript. Są szczególnie przydatne do tworzenia funkcji anonimowych, a także do tworzenia funkcji, które przyjmują jeden argument.
liczby const = [1, 2, 3, 4, 5]; const EvenNumbers = Liczby.filtr (num => num % 2 === 0); konsola.dziennik (nawet liczba osób); // [2, 4]| 12345 | liczby const = [1, 2, 3, 4, 5]; const EvenNumbers = Liczby.filtr (num => num % 2 === 0); konsola.dziennik (nawet liczba osób); // [2, 4] |
W tym przykładzie używamy funkcji strzałki do filtrowania tablicy liczb i zwracania tylko liczb parzystych. Składnia funkcji strzałek jest krótsza i bardziej zwięzła niż tradycyjna składnia funkcji.
Wniosek
Podsumowując, te 15 zaawansowanych technik JavaScript jest niezbędne dla każdego programisty, który chce przenieść swoje umiejętności na wyższy poziom. Niezależnie od tego, czy pracujesz nad małym projektem, czy o dużej aplikacji, techniki te mogą pomóc Ci napisać bardziej wydajny, możliwy do utrzymania kod. Zacznij więc ćwiczyć i zobacz, w jaki sposób te techniki mogą pomóc Ci przenieść swoje umiejętności JavaScript na wyższy poziom!