Hur man använder JavaScript-designmönster

JavaScript-designmönster ger beprövade lösningar på vanliga problem inom mjukvaruutveckling. Genom att förstå och tillämpa dessa mönster kan du skriva bättre och effektivare JavaScript-kod.

Introduktion till JavaScript-designmönster

Begreppen i JavaScript-designmönster tjänar till att vägleda dig om hur du kan övervinna vanliga problem du kommer att möta som JavaScript-utvecklare.

Du bör förstå de underliggande abstraktionerna bakom mönstren, så att du kan tillämpa dem på just ditt problem. Du bör också kunna identifiera när något av nämnda mönster kan vara användbart för din kod.

Modulmönstret

Modulmönstret, som ger inkapsling, är en del av JavaScripts modulsystem. Det ger ett sätt att säkra privata data och beteenden inom en modul samtidigt som ett offentligt API exponeras. Det låter dig skapa fristående modulobjekt med privata och offentliga åtkomstnivåer.

Det här är lite som hur man kan använd åtkomstmodifierare på en klass i ett språk som Java eller C++.

I JavaScript kan du implementera modulmönstret med hjälp av stängningar.

Genom att använda en stängning för att innesluta privata medlemmar (funktioner, variabler, data) skapar du ett scope där dessa medlemmar är tillgängliga men inte direkt exponerade för omvärlden. Detta hjälper till att uppnå inkapsling, hålla de interna detaljerna dolda från extern kod.

Dessutom, genom att returnera ett offentligt API från stängningen ger privat åtkomst till vissa funktioner eller egenskaper som du vill exponera som en del av modulens gränssnitt.

Detta ger dig kontroll över vilka delar av modulen som är tillgängliga för andra delar av kodbasen. Det upprätthåller en tydlig gräns mellan offentlig och privat funktionalitet.

Här är ett exempel:

konst ShoppingCartModule = (fungera () {
// Privata data
låta cartItems = [];
// Privat metod
fungeracalculateTotalItems() {
lämna tillbaka cartItems.reduce((totalt, artikel) => totalt + artikel.kvantitet, 0);
 }
// Public API
lämna tillbaka {
 addItem (item) {
 cartItems.push (artikel);
 },
 getTotalItems() {
lämna tillbaka calculateTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Användningsexempel
ShoppingCartModule.addItem({ namn: 'Produkt 1', kvantitet: 2 });
ShoppingCartModule.addItem({ namn: 'Produkt 2', kvantitet: 1 });
trösta.log (ShoppingCartModule.getTotalItems()); // Utdata: 3
ShoppingCartModule.clearCart();
trösta.log (ShoppingCartModule.getTotalItems()); // Utdata: 0

I det här exemplet är ShoppingCartModule representerar en modul skapad med hjälp av modulmönstret. Kodexekveringen går så här:

1. De IIFE omsluter hela kodblocket och skapar en funktion som omedelbart exekveras vid deklaration. Detta skapar ett privat utrymme för modulens medlemmar.
2. cartItems är en privat array. Den är inte direkt åtkomlig utanför modulen.
3. calculateTotalItems() är en privat metod som beräknar det totala antalet varor i varukorgen. Den använder minska() metod att iterera över cartItems array och summera mängderna av alla föremål.
4. Modulen returnerar sitt publika API som ett objekt bokstavligt, och exponerar tre offentliga metoder: Lägg till vara(), getTotalItems(), och clearCart().
5. Utanför modulen kan du komma åt modulens offentliga metoder för att interagera med kundvagnens funktionalitet.

Det här exemplet visar hur modulmönstret låter dig kapsla in privata data (cartItems) och beteende (calculateTotalItems) inom modulen samtidigt som det tillhandahåller ett offentligt gränssnitt (Lägg till vara, getTotalItems, och clearCart) för att interagera med modulen.

Observatörsmönstret

Observer-mönstret etablerar ett ett-till-många-beroende mellan objekt. När tillståndet för ett objekt ändras, meddelar det alla dess anhöriga, och de uppdateras automatiskt. Detta mönster är särskilt användbart för att hantera händelsedrivna interaktioner eller frikoppling av komponenter i ett system.

I JavaScript kan du implementera Observer-mönstret med den inbyggda addEventListener, dispatchEvent metoder eller något händelsehanteringsmekanismer. Genom att prenumerera observatörer på händelser eller ämnen kan du meddela och uppdatera dem när specifika händelser inträffar.

Till exempel kan du använda Observer-mönstret för att implementera ett enkelt meddelandesystem:

// Implementering av observatörsmönster
fungeraNotification System() {
// Lista över prenumeranter
detta.subscribers = [];
// Metod för att prenumerera på aviseringar
detta.prenumerera = fungera (abonnent) {
detta.subscribers.push (prenumerant);
 };
// Metod för att avsluta prenumerationen på meddelanden
detta.unsubscribe = fungera (abonnent) {
konst index = detta.subscribers.indexOf (prenumerant);
om (index !== -1) {
detta.subscribers.splice (index, 1);
 }
 };
// Metod för att meddela prenumeranter
detta.notify = fungera (meddelande) {
detta.subscribers.forEach(fungera (abonnent) {
 subscriber.receiveNotification (meddelande);
 });
 };
}
// Abonnentobjekt
fungeraAbonnent(namn) {
// Metod för att ta emot och hantera aviseringar
detta.receiveNotification = fungera (meddelande) {
trösta.log (namn + ' fick meddelande: ' + meddelande);
 };
}
// Användningsexempel
konst notificationSystem = ny NotificationSystem();
// Skapa prenumeranter
konst prenumerant1 = ny Abonnent("Prenumerant 1");
konst prenumerant2 = ny Abonnent("Prenumerant 2");
// Prenumerera prenumeranter på meddelandesystemet
notificationSystem.subscribe (prenumerant1);
notificationSystem.subscribe (subscriber2);
// Meddela prenumeranter
notificationSystem.notify("Ny avisering!");

Målet här är att låta flera prenumeranter få meddelanden när en specifik händelse inträffar.

De Notification System funktion representerar systemet som skickar meddelanden, och Abonnent funktion representerar mottagarna av meddelandena.

NotificationSystemet har en array som heter abonnenter för att lagra de prenumeranter som vill ta emot notiser. De prenumerera metoden tillåter abonnenter att registrera sig genom att lägga till sig själva i abonnentgruppen. De säga upp metod skulle ta bort abonnenter från arrayen.

De meddela metoden i NotificationSystem itererar genom abonnentmatrisen och anropar få avisering metod för varje abonnent, så att de kan hantera aviseringarna.

Förekomster av abonnentfunktionen representerar abonnenter. Varje abonnent har en receiveNotification-metod som bestämmer hur de hanterar de mottagna aviseringarna. I det här exemplet loggar metoden det mottagna meddelandet till konsolen.

För att använda observatörsmönstret, skapa en instans av NotificationSystem. Du kan sedan skapa instanser av Prenumerant och lägga till dem i meddelandesystemet med hjälp av prenumerationsmetoden.

Att skicka ut ett meddelande kommer att utlösa receiveNotification-metoden för varje prenumerant och logga meddelandet för varje prenumerant.

Observer-mönstret möjliggör lös koppling mellan aviseringssystemet och abonnenter, vilket möjliggör flexibilitet. Mönstret främjar separationen av problem som kommer att göra underhållet i händelsedrivna system enklare.

Använda avancerade JavaScript-mönster

Här är några allmänna tips för att effektivt använda avancerade JavaScript-mönster:

• Tänk på prestandaimplikationer: Avancerade mönster kan introducera ytterligare komplexitet, vilket kan påverka prestandan. Var uppmärksam på prestationskonsekvenserna och optimera där det behövs.
• Undvik antimönster: Förstå mönstren noggrant och undvik att hamna i antimönster eller missbruka dem. Använd mönster där de är meningsfulla och anpassar sig till din applikations krav.
• Följ kodningskonventioner: Följ konsekvent kodningskonventioner för att bibehålla läsbarhet och konsekvens över hela din kodbas. Använd betydelsefulla variabel- och funktionsnamn och tillhandahåll tydlig dokumentation för dina mönster.

Var försiktig när du applicerar dessa mönster

Modulmönstret möjliggör inkapsling och främjar datasekretess, kodorganisation och skapandet av fristående moduler.

Å andra sidan underlättar observatörsmönstret kommunikation mellan komponenter genom att upprätta ett ämne-abonnentförhållande.

Du bör vara medveten om potentiella fallgropar och vanliga misstag när du implementerar avancerade JavaScript-mönster. Undvik att överanvända mönster där enklare lösningar finns eller skapa alltför komplex kod. Se regelbundet över och omstrukturera din kod för att säkerställa att den förblir underhållbar.