Jak używać wzorców projektowych JavaScript

Wzorce projektowe JavaScript dostarczają sprawdzonych rozwiązań typowych problemów związanych z tworzeniem oprogramowania. Zrozumienie i zastosowanie tych wzorców pozwoli Ci pisać lepszy, wydajniejszy kod JavaScript.

Wprowadzenie do wzorców projektowych JavaScript

Koncepcje zawarte we wzorcach projektowych JavaScript służą jako wskazówki, jak pokonać typowe problemy, z którymi będziesz się borykać jako programista JavaScript.

Powinieneś zrozumieć abstrakcje leżące u podstaw wzorców, abyś mógł zastosować je do konkretnego problemu. Powinieneś także być w stanie określić, kiedy którykolwiek z tych wzorców może być przydatny w twoim kodzie.

Wzór modułu

Wzorzec modułu, który zapewnia enkapsulację, jest częścią System modułów JavaScript. Zapewnia sposób zabezpieczenia prywatnych danych i zachowania w module przy jednoczesnym ujawnieniu publicznego interfejsu API. Pozwala na tworzenie samodzielnych obiektów modułowych z prywatnymi i publicznymi poziomami dostępu.

To trochę tak, jak możesz użyj modyfikatorów dostępu w klasie w języku takim jak Java lub C++.

W JavaScript możesz zaimplementować wzorzec modułu za pomocą domknięć.

Używając domknięcia w celu objęcia członków prywatnych (funkcji, zmiennych, danych), tworzysz zakres, w którym te elementy są dostępne, ale nie są bezpośrednio narażone na świat zewnętrzny. Pomaga to osiągnąć enkapsulację, ukrywając wewnętrzne szczegóły przed zewnętrznym kodem.

Ponadto zwrócenie publicznego interfejsu API z zamknięcia umożliwia prywatny dostęp do niektórych funkcji lub właściwości, które chcesz udostępnić jako część interfejsu modułu.

To da ci kontrolę nad tym, które części modułu są dostępne dla innych części bazy kodu. To utrzymuje wyraźną granicę między funkcjonalnością publiczną i prywatną.

Oto przykład:

konst ShoppingCartModule = (funkcjonować () {
// Prywatne dane
pozwalać elementy koszyka = [];
// Metoda prywatna
funkcjonowaćoblicz RazemPozycje() {
powrót cartItems.reduce((całość, szt) => suma + szt.ilość, 0);
 }
// Publiczny interfejs API
powrót {
 dodaj element (przedmiot) {
 cartItems.push (pozycja);
 },
 getTotalItems() {
powrót oblicz TotalItems();
 },
 wyczyśćKoszyk() {
 elementy koszyka = [];
 }
 };
})();
// Przykład użycia
ShoppingCartModule.addItem({ nazwa: „Produkt 1”, ilość: 2 });
ShoppingCartModule.addItem({ nazwa: „Produkt 2”, ilość: 1 });
konsola.log (ShoppingCartModule.getTotalItems()); // Dane wyjściowe: 3
ShoppingCartModule.clearCart();
konsola.log (ShoppingCartModule.getTotalItems()); // Dane wyjściowe: 0

W tym przykładzie Moduł koszyka zakupów reprezentuje moduł utworzony przy użyciu wzorca modułu. Wykonanie kodu wygląda następująco:

1. The IIFE zawija cały blok kodu, tworząc funkcję, która jest wykonywana natychmiast po deklaracji. Ustanawia to zakres prywatny dla członków modułu.
2. koszykPozycje jest prywatną tablicą. Nie jest on bezpośrednio dostępny z zewnątrz modułu.
3. oblicz RazemPozycje() to prywatna metoda, która oblicza całkowitą liczbę elementów w koszyku. Używa zmniejszyć() metoda iteracji po koszykPozycje utwórz tablicę i zsumuj ilości wszystkich elementów.
4. Moduł zwraca swoje publiczne API jako literał obiektowy, ujawniając trzy publiczne metody: Dodaj Przedmiot(), getTotalItems(), I wyczyśćKoszyk().
5. Poza modułem można uzyskać dostęp do publicznych metod modułu w celu interakcji z funkcjonalnością koszyka.

Ten przykład pokazuje, jak wzorzec modułu umożliwia hermetyzację prywatnych danych (koszykPozycje) i zachowanie (oblicz RazemPozycje) w ramach modułu, zapewniając jednocześnie publiczny interfejs (Dodaj Przedmiot, pobierz RazemPozycje, I wyczyśćKoszyk) do interakcji z modułem.

Wzór obserwatora

Wzorzec Obserwator ustanawia zależność jeden-do-wielu między obiektami. Gdy zmienia się stan jednego obiektu, powiadamia on wszystkie jego obiekty zależne, które aktualizują się automatycznie. Ten wzorzec jest szczególnie przydatny do zarządzania interakcjami sterowanymi zdarzeniami lub oddzielania komponentów w systemie.

W JavaScript możesz zaimplementować wzorzec Observer za pomocą wbudowanego addEventListener, wysyłkaZdarzenie metody lub jakiekolwiek mechanizmy obsługi zdarzeń. Subskrybując obserwatorów wydarzeń lub tematów, możesz powiadamiać ich i aktualizować, gdy wystąpią określone zdarzenia.

Na przykład możesz użyć wzorca Obserwator do zaimplementowania prostego systemu powiadomień:

// Implementacja wzorca obserwatora
funkcjonowaćSystem powiadomień() {
// Lista subskrybentów
Ten.subskrybenci = [];
// Metoda subskrybowania powiadomień
Ten.subskrybuj = funkcjonować (abonent) {
Ten.subskrybenci.push (abonent);
 };
// Metoda anulowania subskrypcji powiadomień
Ten.anuluj subskrypcję = funkcjonować (abonent) {
konst indeks = Ten.subscribers.indexOf (abonent);
Jeśli (indeks !== -1) {
Ten.subscribers.splice (indeks, 1);
 }
 };
// Metoda powiadamiania subskrybentów
Ten.powiadom = funkcjonować (wiadomość) {
Ten.subskrybenci.forEach(funkcjonować (abonent) {
 subskrybent.receiveNotification (wiadomość);
 });
 };
}
// Obiekt subskrybenta
funkcjonowaćAbonent(nazwa) {
// Metoda otrzymywania i obsługi powiadomień
Ten.receiveNotification = funkcjonować (wiadomość) {
konsola.log (nazwa + ' otrzymane powiadomienie: ' + wiadomość);
 };
}
// Przykład użycia
konst System powiadomień = nowy System powiadomień();
// Utwórz subskrybentów
konst abonent1 = nowy Abonent(„Abonent 1”);
konst abonent2 = nowy Abonent(„Abonent 2”);
// Zapisz subskrybentów do systemu powiadomień
system powiadomień.subscribe (subskrybent1);
system powiadomień. subskrybuj (abonent2);
// Powiadom subskrybentów
system powiadomień.notify(„Nowe powiadomienie!”);

Celem jest umożliwienie wielu subskrybentom otrzymywania powiadomień o wystąpieniu określonego zdarzenia.

The System powiadomień reprezentuje system, który wysyła powiadomienia, a funkcja Abonent funkcja reprezentuje odbiorców powiadomień.

NotificationSystem ma tablicę o nazwie abonenci do przechowywania subskrybentów, którzy chcą otrzymywać powiadomienia. The Subskrybuj Metoda umożliwia subskrybentom rejestrację poprzez dodanie siebie do tablicy subskrybentów. The anulować subskrypcję metoda usunie subskrybentów z tablicy.

The notyfikować Metoda w NotificationSystem iteruje po tablicy subskrybentów i wywołuje metodę odbierać powiadomienie metodę na każdego abonenta, umożliwiającą mu obsługę powiadomień.

Instancje funkcji Subskrybent reprezentują subskrybentów. Każdy subskrybent ma metodę receiveNotification, która określa sposób obsługi otrzymanych powiadomień. W tym przykładzie metoda rejestruje odebrany komunikat w konsoli.

Aby użyć wzorca obserwatora, utwórz instancję NotificationSystem. Następnie możesz utworzyć instancje Subskrybenta i dodać je do systemu powiadomień za pomocą metody subskrypcji.

Wysłanie powiadomienia uruchomi metodę receiveNotification dla każdego subskrybenta i zarejestruje wiadomość dla każdego subskrybenta.

Wzorzec Obserwator umożliwia luźne powiązanie między systemem powiadomień a subskrybentami, zapewniając elastyczność. Wzorzec promuje oddzielenie problemów, co ułatwi konserwację w systemach sterowanych zdarzeniami.

Korzystanie z zaawansowanych wzorców JavaScript

Oto kilka ogólnych wskazówek dotyczących efektywnego korzystania z zaawansowanych wzorców JavaScript:

• Weź pod uwagę wpływ na wydajność: zaawansowane wzorce mogą wprowadzać dodatkową złożoność, co może mieć wpływ na wydajność. Należy pamiętać o implikacjach wydajności i zoptymalizować tam, gdzie to konieczne.
• Unikaj antywzorców: Dokładnie zapoznaj się z wzorcami i unikaj wpadania w antywzorce lub niewłaściwego ich używania. Używaj wzorców tam, gdzie mają one sens i są zgodne z wymaganiami aplikacji.
• Przestrzegaj konwencji kodowania: Konsekwentnie przestrzegaj konwencji kodowania, aby zachować czytelność i spójność całej bazy kodu. Używaj znaczących nazw zmiennych i funkcji oraz udostępniaj przejrzystą dokumentację swoich wzorców.

Zachowaj ostrożność podczas stosowania tych wzorców

Wzorzec modułu umożliwia enkapsulację i promuje prywatność danych, organizację kodu i tworzenie samodzielnych modułów.

Z drugiej strony wzorzec Obserwator ułatwia komunikację między komponentami poprzez ustanowienie relacji podmiot-subskrybent.

Powinieneś być świadomy potencjalnych pułapek i typowych błędów podczas wdrażania zaawansowanych wzorców JavaScript. Unikaj nadużywania wzorców tam, gdzie istnieją prostsze rozwiązania lub tworzenia zbyt złożonego kodu. Regularnie przeglądaj i refaktoryzuj swój kod, aby zapewnić jego utrzymanie.