Jak používat návrhové vzory JavaScriptu

Návrhové vzory JavaScriptu poskytují osvědčená řešení běžných problémů při vývoji softwaru. Pochopení a použití těchto vzorů vám umožní psát lepší a efektivnější kód JavaScript.

Úvod do návrhových vzorů JavaScriptu

Koncepty obsažené v návrhových vzorech JavaScriptu slouží jako vodítko k tomu, jak překonat běžné problémy, se kterými se jako vývojář JavaScriptu setkáte.

Měli byste rozumět základním abstrakcím za vzory, abyste je mohli aplikovat na svůj konkrétní problém. Měli byste být také schopni identifikovat, kdy kterýkoli z uvedených vzorů může být užitečný pro váš kód.

Vzor modulu

Vzor Module, který zajišťuje zapouzdření, je součástí Modulový systém JavaScriptu. Poskytuje způsob, jak zabezpečit soukromá data a chování v rámci modulu a zároveň odhalit veřejné API. Umožňuje vám vytvářet samostatné modulové objekty s úrovní soukromého a veřejného přístupu.

Je to trochu podobné tomu, jak můžete používat modifikátory přístupu na třídu v jazyce, jako je Java nebo C++.

V JavaScriptu můžete implementovat vzor modulu pomocí uzávěrů.

Použitím uzávěru k uzavření soukromých členů (funkcí, proměnných, dat) vytvoříte rozsah, kde jsou tito členové přístupní, ale nejsou přímo vystaveni vnějšímu světu. To pomáhá dosáhnout zapouzdření, přičemž vnitřní detaily jsou skryté před externím kódem.

Vrácení veřejného rozhraní API z uzavření navíc umožňuje soukromý přístup k určitým funkcím nebo vlastnostem, které chcete vystavit jako součást rozhraní modulu.

To vám dá kontrolu nad tím, které části modulu jsou přístupné ostatním částem kódové základny. To udržuje jasnou hranici mezi veřejnou a soukromou funkcí.

Zde je příklad:

konst ShoppingCartModule = (funkce () {
// Soukromá data
nechat cartItems = [];
// Soukromá metoda
funkcevypočítatTotalItems() {
vrátit se cartItems.reduce((celkem, položka) => celkem + položka.množství, 0);
 }
// Veřejné rozhraní API
vrátit se {
 addItem (položka) {
 cartItems.push (položka);
 },
 getTotalItems() {
vrátit se vypočítatTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Příklad použití
ShoppingCartModule.addItem({ název: 'Produkt 1', Množství: 2 });
ShoppingCartModule.addItem({ název: 'Produkt 2', Množství: 1 });
řídicí panel.log (ShoppingCartModule.getTotalItems()); // Výstup: 3
ShoppingCartModule.clearCart();
řídicí panel.log (ShoppingCartModule.getTotalItems()); // Výstup: 0

V tomto příkladu je ShoppingCartModule představuje modul vytvořený pomocí vzoru modulu. Spuštění kódu probíhá takto:

1. The IIFE zabalí celý blok kódu a vytvoří funkci, která se po deklaraci okamžitě spustí. Tím se vytvoří soukromý rozsah pro členy modulu.
2. cartItems je soukromé pole. Není přímo přístupný zvenčí modulu.
3. vypočítatTotalItems() je soukromá metoda, která vypočítává celkový počet položek v košíku. Používá se snížit() metoda iterace přes cartItems pole a sečtěte množství všech položek.
4. Modul vrátí své veřejné API jako objektový literál a odhalí tři veřejné metody: přidat položku(), getTotalItems(), a clearCart().
5. Mimo modul máte přístup k veřejným metodám modulu pro interakci s funkcí nákupního košíku.

Tento příklad ukazuje, jak vám vzor modulu umožňuje zapouzdřit soukromá data (cartItems) a chování (vypočítatTotalItems) v rámci modulu a zároveň poskytuje veřejné rozhraní (přidat položku, getTotalItems, a clearCart) pro interakci s modulem.

Vzor pozorovatele

Vzor Pozorovatel vytváří závislost jedna k mnoha mezi objekty. Když se stav jednoho objektu změní, upozorní všechny jeho závislé osoby a ty se automaticky aktualizují. Tento vzor je zvláště užitečný pro správu interakcí řízených událostmi nebo oddělování komponent v systému.

V JavaScriptu můžete implementovat vzor Observer pomocí vestavěného addEventListener, událost odeslání metody, nebo jakékoli mechanismy zpracování událostí. Přihlášením pozorovatelů k událostem nebo subjektům je můžete upozornit a aktualizovat, když nastanou konkrétní události.

Vzor Observer můžete například použít k implementaci jednoduchého systému upozornění:

// Implementace vzoru pozorovatele
funkceNotifikační systém() {
// Seznam odběratelů
tento.předplatitelé = [];
// Způsob přihlášení k odběru oznámení
tento.předplatit = funkce (odběratel) {
tento.předplatitelé.push (předplatitel);
 };
// Metoda odhlášení odběru oznámení
tento.odhlásit odběr = funkce (odběratel) {
konst index = tento.subscribers.indexOf (předplatitel);
-li (index !== -1) {
tento.subscribers.splice (index, 1);
 }
 };
// Způsob upozornění odběratelům
tento.oznámit = funkce (zpráva) {
tento.subscribers.forEach(funkce (odběratel) {
 subscriber.receiveNotification (zpráva);
 });
 };
}
// Objekt odběratele
funkceOdběratel(název) {
// Metoda pro příjem a zpracování oznámení
tento.receiveNotification = funkce (zpráva) {
řídicí panel.log (jméno + ' přijaté oznámení:' + zpráva);
 };
}
// Příklad použití
konst oznamovací systém = Nový NotificationSystem();
// Vytvořte odběratele
konst předplatitel1 = Nový Odběratel('Předplatitel 1');
konst předplatitel2 = Nový Odběratel('Předplatitel 2');
// Přihlásit se k odběru předplatitelů systému upozornění
notificationSystem.subscribe (subscriber1);
notificationSystem.subscribe (subscriber2);
// Informujte předplatitele
notificationSystem.notify('Nové oznámení!');

Cílem je umožnit více odběratelům dostávat upozornění, když dojde ke konkrétní události.

The Notifikační systém funkce představuje systém, který odesílá upozornění, a Odběratel představuje příjemce oznámení.

NotificationSystem má pole s názvem předplatitelů pro uložení předplatitelů, kteří chtějí dostávat upozornění. The předplatit metoda umožňuje předplatitelům zaregistrovat se přidáním sebe do pole předplatitelů. The Odhlásit odběr metoda by odstranila účastníky z pole.

The oznámit metoda v NotificationSystem iteruje pole odběratelů a volá přijímat oznámení na každém předplatiteli, což jim umožňuje zpracovávat oznámení.

Instance funkce Subscriber představují účastníky. Každý předplatitel má metodu příjmu oznámení, která určuje, jak naloží s přijatými oznámeními. V tomto příkladu metoda zaprotokoluje přijatou zprávu do konzoly.

Chcete-li použít vzor pozorovatele, vytvořte instanci NotificationSystem. Poté můžete vytvořit instance Subscriber a přidat je do systému upozornění pomocí metody Subscriber.

Odeslání oznámení spustí metodu příjmu oznámení pro každého předplatitele a zaprotokoluje zprávu pro každého předplatitele.

Vzor Pozorovatel umožňuje volné propojení mezi oznamovacím systémem a předplatiteli, což umožňuje flexibilitu. Vzor podporuje oddělení zájmů, což usnadní údržbu v systémech řízených událostmi.

Používání pokročilých vzorů JavaScriptu

Zde je několik obecných tipů, jak efektivně používat pokročilé vzory JavaScriptu:

• Zvažte důsledky pro výkon: Pokročilé vzory mohou představovat další složitost, která může ovlivnit výkon. Mějte na paměti dopady na výkon a v případě potřeby optimalizovat.
• Vyhněte se anti-vzorům: Důkladně pochopte vzory a vyvarujte se pádu do anti-vzorů nebo jejich zneužití. Používejte vzory tam, kde dávají smysl a jsou v souladu s požadavky vaší aplikace.
• Dodržujte konvence kódování: Důsledně dodržujte konvence kódování, abyste zachovali čitelnost a konzistenci v rámci své kódové základny. Používejte smysluplné názvy proměnných a funkcí a poskytněte jasnou dokumentaci svých vzorů.

Při aplikaci těchto vzorů buďte opatrní

Vzor Module umožňuje zapouzdření a podporuje soukromí dat, organizaci kódu a vytváření samostatných modulů.

Na druhé straně vzor Pozorovatel usnadňuje komunikaci mezi komponentami vytvořením vztahu subjekt-předplatitel.

Při implementaci pokročilých vzorů JavaScriptu byste si měli být vědomi potenciálních úskalí a běžných chyb. Vyhněte se nadměrnému používání vzorů tam, kde existují jednodušší řešení, nebo vytváření příliš složitého kódu. Pravidelně kontrolujte a refaktorujte svůj kód, abyste zajistili, že zůstane udržovatelný.