Ako používať dizajnové vzory JavaScript

Návrhové vzory JavaScriptu poskytujú overené riešenia bežných problémov pri vývoji softvéru. Pochopenie a použitie týchto vzorov vám umožní písať lepší a efektívnejší kód JavaScript.

Úvod do návrhových vzorov JavaScriptu

Koncepty obsiahnuté v návrhových vzoroch JavaScriptu slúžia ako návod, ako prekonať bežné problémy, ktorým budete ako vývojár JavaScriptu čeliť.

Mali by ste pochopiť základné abstrakcie za vzormi, aby ste ich mohli použiť na svoj konkrétny problém. Mali by ste byť tiež schopní identifikovať, kedy môže byť niektorý z uvedených vzorov užitočný pre váš kód.

Vzor modulu

Vzor Module, ktorý poskytuje zapuzdrenie, je súčasťou Modulový systém JavaScriptu. Poskytuje spôsob, ako zabezpečiť súkromné ​​údaje a správanie v rámci modulu a zároveň odhaliť verejné API. Umožňuje vám vytvárať samostatné modulové objekty so súkromnou a verejnou úrovňou prístupu.

Je to trochu podobné, ako môžete použite modifikátory prístupu na triedu v jazyku ako Java alebo C++.

V JavaScripte môžete implementovať vzor modulu pomocou uzáverov.

Použitím uzáveru na uzavretie súkromných členov (funkcií, premenných, údajov) vytvoríte rozsah, v ktorom sú títo členovia prístupní, ale nie sú priamo vystavení vonkajšiemu svetu. To pomáha dosiahnuť zapuzdrenie, pričom vnútorné detaily sú skryté pred vonkajším kódom.

Okrem toho vrátenie verejného rozhrania API z uzavretia umožňuje súkromný prístup k určitým funkciám alebo vlastnostiam, ktoré chcete odhaliť ako súčasť rozhrania modulu.

To vám poskytne kontrolu nad tým, ktoré časti modulu sú prístupné iným častiam kódovej základne. To zachováva jasnú hranicu medzi verejnou a súkromnou funkčnosťou.

Tu je príklad:

konšt ShoppingCartModule = (funkciu () {
// Súkromné ​​údaje
nech cartItems = [];
// Súkromná metóda
funkciuvypočítaťTotalItems() {
vrátiť cartItems.reduce((celkom, položka) => spolu + položka.množstvo, 0);
 }
// Verejné API
vrátiť {
 addItem (položka) {
 cartItems.push (položka);
 },
 getTotalItems() {
vrátiť vypočítaťTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Príklad použitia
ShoppingCartModule.addItem({ názov: 'produkt 1', množstvo: 2 });
ShoppingCartModule.addItem({ názov: 'Produkt 2', množstvo: 1 });
konzoly.log (ShoppingCartModule.getTotalItems()); // Výstup: 3
ShoppingCartModule.clearCart();
konzoly.log (ShoppingCartModule.getTotalItems()); // Výstup: 0

V tomto príklade ShoppingCartModule predstavuje modul vytvorený pomocou vzoru modulu. Spustenie kódu prebieha takto:

1. The IIFE zabalí celý blok kódu a vytvorí funkciu, ktorá sa vykoná okamžite po deklarácii. Tým sa vytvorí súkromný rozsah pre členov modulu.
2. cartItems je súkromné ​​pole. Nie je priamo prístupný zvonku modulu.
3. vypočítaťTotalItems() je súkromná metóda, ktorá vypočítava celkový počet položiek v košíku. Používa sa znížiť () metóda iterácie cez cartItems pole a spočítajte množstvá všetkých položiek.
4. Modul vráti svoje verejné API ako objektový literál, čím odhalí tri verejné metódy: pridať položku(), getTotalItems(), a clearCart().
5. Mimo modulu máte prístup k verejným metódam modulu na interakciu s funkciou nákupného košíka.

Tento príklad ukazuje, ako vám vzor modulu umožňuje zapuzdrenie súkromných údajov (cartItems) a správanie (vypočítaťTotalItems) v rámci modulu a zároveň poskytuje verejné rozhranie (pridať položku, getTotalItems, a clearCart) na interakciu s modulom.

Vzor pozorovateľa

Vzor Pozorovateľ vytvára závislosť od jedného k mnohým medzi objektmi. Keď sa zmení stav jedného objektu, upozorní na to všetky jeho závislé osoby a tie sa automaticky aktualizujú. Tento vzor je obzvlášť užitočný na riadenie interakcií riadených udalosťami alebo oddelenie komponentov v systéme.

V JavaScripte môžete implementovať vzor Pozorovateľ pomocou vstavaného addEventListener, udalosť odoslania metódy, alebo akékoľvek mechanizmy spracovania udalostí. Prihlásením pozorovateľov k udalostiam alebo subjektom ich môžete upozorniť a aktualizovať, keď nastanú konkrétne udalosti.

Vzor Observer môžete napríklad použiť na implementáciu jednoduchého systému upozornení:

// Implementácia vzoru pozorovateľa
funkciuSystém upozornení() {
// Zoznam odberateľov
toto.predplatitelia = [];
// Spôsob prihlásenia na odber upozornení
toto.predplatiť = funkciu (predplatiteľ) {
toto.predplatitelia.push (predplatiteľ);
 };
// Metóda zrušenia odberu upozornení
toto.odhlásiť sa = funkciu (predplatiteľ) {
konšt index = toto.subscribers.indexOf (predplatiteľ);
ak (index !== -1) {
toto.subscribers.splice (index, 1);
 }
 };
// Spôsob upozorňovania predplatiteľov
toto.oznámiť = funkciu (správu) {
toto.subscribers.forEach(funkciu (predplatiteľ) {
 subscriber.receiveNotification (správa);
 });
 };
}
// Objekt predplatiteľa
funkciuPredplatiteľ(názov) {
// Spôsob prijímania a spracovania upozornení
toto.receiveNotification = funkciu (správu) {
konzoly.log (meno + ' prijaté upozornenie: ' + správa);
 };
}
// Príklad použitia
konšt oznamovací systém = Nový NotificationSystem();
// Vytvorenie odberateľov
konšt predplatiteľ1 = Nový Predplatiteľ(„Predplatiteľ 1“);
konšt predplatiteľ2 = Nový Predplatiteľ(„Predplatiteľ 2“);
// Prihláste predplatiteľov do systému upozornení
notificationSystem.subscribe (subscriber1);
notificationSystem.subscribe (subscriber2);
// Upozorniť predplatiteľov
notificationSystem.notify('Nové upozornenie!');

Cieľom je umožniť viacerým predplatiteľom dostávať upozornenia, keď nastane konkrétna udalosť.

The Systém upozornení funkcia predstavuje systém, ktorý odosiela upozornenia, a Predplatiteľ predstavuje príjemcov upozornení.

NotificationSystem má pole tzv predplatiteľov na uloženie predplatiteľov, ktorí chcú dostávať upozornenia. The predplatiť metóda umožňuje predplatiteľom registrovať sa pridaním sa do poľa predplatiteľov. The zrušiť odber metóda by odstránila účastníkov z poľa.

The oznámiť metóda v NotificationSystem iteruje cez pole odberateľov a volá prijímať Upozornenie na každom predplatiteľovi, čo im umožní spracovať upozornenia.

Inštancie funkcie Subscriber predstavujú účastníkov. Každý predplatiteľ má metódu príjem oznámenia, ktorá určuje, ako zaobchádza s prijatými oznámeniami. V tomto príklade metóda zaprotokoluje prijatú správu do konzoly.

Ak chcete použiť vzor pozorovateľa, vytvorte inštanciu NotificationSystem. Potom môžete vytvoriť inštancie Subscriber a pridať ich do systému upozornení pomocou metódy Subscriber.

Odoslanie oznámenia spustí metódu prijatia oznámenia pre každého účastníka a zaznamená správu pre každého účastníka.

Vzor Pozorovateľ umožňuje voľné prepojenie medzi systémom upozornení a predplatiteľmi, čo umožňuje flexibilitu. Vzor podporuje oddelenie záujmov, čo uľahčí údržbu v systémoch riadených udalosťami.

Používanie pokročilých vzorov JavaScriptu

Tu je niekoľko všeobecných tipov na efektívne používanie pokročilých vzorov JavaScript:

• Zvážte dôsledky na výkon: Pokročilé vzory môžu predstavovať ďalšiu zložitosť, ktorá môže ovplyvniť výkon. Buďte si vedomí dôsledkov výkonu a v prípade potreby optimalizovať.
• Vyhnite sa anti-vzorom: Dôkladne pochopte vzory a vyhnite sa pádu do anti-vzorov alebo ich nesprávnemu použitiu. Použite vzory tam, kde majú zmysel a sú v súlade s požiadavkami vašej aplikácie.
• Dodržiavajte konvencie kódovania: Dôsledne dodržiavajte konvencie kódovania, aby ste si zachovali čitateľnosť a konzistentnosť v rámci svojej kódovej základne. Používajte zmysluplné názvy premenných a funkcií a poskytnite jasnú dokumentáciu pre svoje vzory.

Pri aplikácii týchto vzorov buďte opatrní

Vzor modulu umožňuje zapuzdrenie a podporuje súkromie údajov, organizáciu kódu a vytváranie samostatných modulov.

Na druhej strane vzor Pozorovateľ uľahčuje komunikáciu medzi komponentmi vytvorením vzťahu subjekt-predplatiteľ.

Pri implementácii pokročilých vzorov JavaScriptu by ste si mali byť vedomí možných úskalí a bežných chýb. Vyhnite sa nadmernému používaniu vzorov tam, kde existujú jednoduchšie riešenia, alebo vytváraniu príliš zložitého kódu. Pravidelne kontrolujte a upravujte svoj kód, aby ste sa uistili, že zostane udržiavateľný.