JavaScript wprowadził w ES2020 operator składający się z dwóch znaków zapytania, dzięki któremu można w łatwy sposób zrealizować logikę – jeśli wartość nie istnieje (null lub undefined), to zwróć domyślną wartość: Warto zajrzeć 1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
Czasami zdarza się, że musimy skorzystać z kilku zagnieżdżeń obiektów. Aby ustrzec się błędów wykonania, należy sprawdzić czy każdy zagnieżdżony obiekt istnieje: Bardziej zwięzłe rozwiązanie – Optional Chaining Dzięki rozwiązniu Optional Chaining, możliwe jest korzystanie z zagnieżdżonych obiektów w łatwy sposób – nie ma potrzeby sprawdzania czy kolejne zagnieżdżenia istnieją. Jeśli któreś z zagnieżdżeń nie …
JavaScript pozawala na zwięzłe przypisanie elementów tablicy, lub pól obiektu, do zmiennych. Przypisanie elementów tablicy do zmiennych (destruktyryzacja tablicy) W podstawowej wersji nazwy zmiennych muszą się pokrywać z nazwą pól w obiekcie, możliwe jest także przypisanie pól obiektu do zmiennych o innych nazwach: Przypisanie pól obiektu do zmiennych (destruktyryzacja obiektu) Do zmiennej a zostanie przypisana …
W JavaScript trzy kropki można wykorzystać na dwa sposoby: 1. Aby uzyskać zmienną listę argumentów funkcji (rest parameters)2. Aby zamienić tablicę na pojedyncze zmienne (spread operator) Zmienna lista argumentów Zamiana tablicy na pojedyncze zmienne
Moduł to po prostu plik. A żeby przeglądarka traktowała taki plik jako moduł należy dodać type=”module” do tagu script. index.html Co odróżnia moduł od zwykłego pliku JS? export/import W przypadku modułów aby skorzystać z danych znajdujących się w innym module (pliku) należy jawnie je wyeksportować a następnie zaimportować tam gdzie są potrzebne (w „klasycznym” JavaScript …
Jak wyizolować scope? Wystarczy niejako nadpisać ten pochodzący od rodzica: Dzięki czemu nie dziedziczymy już ze scope rodzica. Wytrych – czyli jak izolowany scope może dostać coś od rodzica Aby móc dostać coś od rodzica musi się to zadziać poprzez przesłanie wartości przez atrybut: Jak dyrektywa może przyjmować wartość? @ one-way binding wartości, ale tylko …
AngularJS – izolowany scope i jak mu coś przekazać Czytaj dalej »
Mowa tutaj o wiązaniach pomiędzy widokiem a modelem – czyli jak zmiany w widoku wpływają na model i odwrotnie (jak zmiany w modelu wpływają na widok). I gdzie można dokonać optymalizacji. One-way data binding Jest to sytuacja, w której dane płyną z modelu do widoku – każda ich zmiana w modelu powoduje aktualizację widoku. Zmiany …
AngularJS two-way, one-way oraz one-time data binding Czytaj dalej »
Przeglądarki wspierają dwa rodzaje magazynów – lokalny i sesyjny, które pozwalając na wrzucanie tam dowolnych rzeczy wykorzystując pary klucz-wartość. Lokalny magazyn (local storage) Jest to magazyn, który jest czyszczony po zamknięciu wszystkich kart przeglądarki. I jest on tworzony dla każdej strony oddzielnie (dokładnie rzecz ujmując to dla konkretnego źródła – protokół + domena + port …
Lokalny i Sesyjny magazyn w przeglądarce (local & session storage) Czytaj dalej »
Web komponenty pozwalają na tworzenie własnych tagów (lub innych elementów) HTML. Przykład Przykład przedstawia stworzenie prostego komponentu opisującego pogodę. 1. Rejestracja komponentu Aby zarejestrować komponent wystarczy następujący fragment kodu: Niestety nie robi on w tym momencie kompletnie nic. Mamy tutaj definicję klasy Wheater rozszerzającą klasę HTMLElement i wywołującą jej konstruktor. Po czym następuje rejestracja elementu …
Problem Wyjdźmy od problemu – pewnego rodzaju standardem w HTML jest to, że tagi są zapisywane za pomocą kebab case, czyli na przykład <some-tag-name>. A JavaScript ma problem z obsługą zmiennych/pól o takich nazwach: Ponieważ JavaScript traktuje myślnik jako znak odejmowania, to nie jest w stanie poradzić sobie z powyższym zapisem. Rozwiązanie – normalizacja AngularJS …
