Du finder masser af applikationer til disse to mønstre, så sørg for at du har en solid forståelse af, hvordan de fungerer, og hvornår du skal bruge dem.
JavaScript-designmønstre giver dokumenterede løsninger på almindelige problemer inden for softwareudvikling. Forståelse og anvendelse af disse mønstre vil give dig mulighed for at skrive bedre og mere effektiv JavaScript-kode.
Introduktion til JavaScript-designmønstre
Koncepterne i JavaScript-designmønstre tjener til at guide dig til, hvordan du kan overvinde almindelige problemer, du vil møde som JavaScript-udvikler.
Du bør forstå de underliggende abstraktioner bag mønstrene, så du kan anvende dem på netop dit problem. Du bør også være i stand til at identificere, hvornår nogen af de nævnte mønstre kan være nyttige for din kode.
Modulmønsteret
Modulmønsteret, som giver indkapsling, er en del af JavaScripts modulsystem. Det giver en måde at sikre private data og adfærd inden for et modul, mens den afslører en offentlig API. Det giver dig mulighed for at oprette selvstændige modulobjekter med private og offentlige adgangsniveauer.
Det er lidt ligesom, hvordan du kan bruge adgangsmodifikatorer på en klasse i et sprog som Java eller C++.
I JavaScript kan du implementere modulmønsteret ved hjælp af lukninger.
Ved at bruge en lukning til at omslutte private medlemmer (funktioner, variabler, data) skaber man et scope, hvor disse medlemmer er tilgængelige, men ikke direkte eksponeret for omverdenen. Dette hjælper med at opnå indkapsling og holder de interne detaljer skjult for ekstern kode.
Derudover giver returnering af en offentlig API fra lukningen privat adgang til visse funktioner eller egenskaber, som du ønsker at eksponere som en del af modulets grænseflade.
Dette vil give dig kontrol over, hvilke dele af modulet, der er tilgængelige for andre dele af kodebasen. Det fastholder en klar grænse mellem offentlig og privat funktionalitet.
Her er et eksempel:
konst ShoppingCartModule = (fungere () {
// Private data
lade cartItems = [];// Privat metode
fungereberegneTotalItems() {
Vend tilbage cartItems.reduce((samlet, vare) => total + vare.antal, 0);
}// Offentlig API
Vend tilbage {
addItem (item) {
cartItems.push (vare);
},getTotalItems() {
Vend tilbage calculateTotalItems();
},clearCart() {
cartItems = [];
}
};
})();// Eksempel på brug
ShoppingCartModule.addItem({ navn: 'Produkt 1', antal: 2 });
ShoppingCartModule.addItem({ navn: 'Produkt 2', antal: 1 });konsol.log (ShoppingCartModule.getTotalItems()); // Output: 3
ShoppingCartModule.clearCart();
konsol.log (ShoppingCartModule.getTotalItems()); // Output: 0
I dette eksempel er Indkøbsvognsmodul repræsenterer et modul oprettet ved hjælp af modulmønsteret. Kode eksekveringen går sådan her:
- Det IIFE ombryder hele kodeblokken og skaber en funktion, der udføres umiddelbart efter erklæringen. Dette etablerer et privat scope for modulets medlemmer.
- cartItems er et privat array. Det er ikke direkte tilgængeligt uden for modulet.
- calculateTotalItems() er en privat metode, der beregner det samlede antal varer i indkøbskurven. Den bruger reducere() metode til at iterere over cartItems array og opsummer mængderne af alle varer.
- Modulet returnerer dets offentlige API som et bogstaveligt objekt, der afslører tre offentlige metoder: addItem(), getTotalItems(), og clearCart().
- Uden for modulet kan du få adgang til modulets offentlige metoder til at interagere med indkøbskurvens funktionalitet.
Dette eksempel viser, hvordan modulmønsteret giver dig mulighed for at indkapsle private data (cartItems) og adfærd (beregneTotalItems) inden for modulet, samtidig med at det giver en offentlig grænseflade (addItem, getTotalItems, og clearCart) for at interagere med modulet.
Observer-mønsteret
Observer-mønsteret etablerer en en-til-mange-afhængighed mellem objekter. Når et objekts tilstand ændres, giver det alle dets pårørende besked, og de opdaterer automatisk. Dette mønster er især nyttigt til styring af hændelsesdrevne interaktioner eller afkobling af komponenter i et system.
I JavaScript kan du implementere Observer-mønsteret ved hjælp af den indbyggede addEventListener, dispatchEvent metoder eller evt mekanismer til håndtering af hændelser. Ved at abonnere observatører på begivenheder eller emner kan du underrette og opdatere dem, når specifikke begivenheder indtræffer.
For eksempel kan du bruge Observer-mønsteret til at implementere et simpelt meddelelsessystem:
// Implementering af observatørmønster
fungereNotifikationssystem() {
// Liste over abonnenter
det her.subscribers = [];// Metode til at abonnere på notifikationer
det her.subscribe = fungere (abonnent) {
det her.subscribers.push (abonnent);
};// Metode til at afmelde meddelelser
det her.unsubscribe = fungere (abonnent) {
konst indeks = det her.subscribers.indexOf (abonnent);hvis (indeks !== -1) {
det her.subscribers.splice (indeks, 1);
}
};// Metode til at underrette abonnenter
det her.notify = fungere (besked) {
det her.subscribers.forEach(fungere (abonnent) {
subscriber.receiveNotification (besked);
});
};
}// Abonnent objekt
fungereAbonnent(navn) {
// Metode til at modtage og håndtere meddelelser
det her.receiveNotification = fungere (besked) {
konsol.log (navn + ' modtaget meddelelse: ' + besked);
};
}// Eksempel på brug
konst notificationSystem = ny NotificationSystem();// Opret abonnenter
konst abonnent1 = ny Abonnent('Abonnent 1');
konst abonnent2 = ny Abonnent('Abonnent 2');// Abonner abonnenter på notifikationssystemet
notificationSystem.subscribe (abonnent1);
notificationSystem.subscribe (abonnent2);
// Underret abonnenter
notificationSystem.notify('Ny notifikation!');
Målet her er at give flere abonnenter mulighed for at modtage meddelelser, når en bestemt hændelse indtræffer.
Det Notifikationssystem funktion repræsenterer det system, der sender meddelelser, og Abonnent funktion repræsenterer modtagerne af meddelelserne.
Notifikationssystemet har et array kaldet abonnenter til at gemme de abonnenter, der ønsker at modtage notifikationer. Det abonnere metode giver abonnenter mulighed for at registrere sig ved at tilføje sig selv til abonnent-arrayet. Det opsige abonnement metode ville fjerne abonnenter fra arrayet.
Det underrette metoden i NotificationSystem itererer gennem abonnent-arrayet og kalder modtage meddelelse metode på hver abonnent, så de kan håndtere meddelelserne.
Forekomster af abonnentfunktionen repræsenterer abonnenter. Hver abonnent har en receiveNotification-metode, der bestemmer, hvordan de håndterer de modtagne meddelelser. I dette eksempel logger metoden den modtagne besked til konsollen.
For at bruge observatørmønsteret skal du oprette en forekomst af NotificationSystem. Du kan derefter oprette forekomster af abonnent og tilføje dem til meddelelsessystemet ved hjælp af abonnentmetoden.
Udsendelse af en meddelelse vil udløse receiveNotification-metoden for hver abonnent og logge meddelelsen for hver abonnent.
Observer-mønsteret muliggør løs kobling mellem notifikationssystemet og abonnenter, hvilket giver mulighed for fleksibilitet. Mønsteret fremmer adskillelsen af bekymringer, hvilket vil gøre vedligeholdelse i hændelsesdrevne systemer lettere.
Brug avancerede JavaScript-mønstre
Her er nogle generelle tips til effektiv brug af avancerede JavaScript-mønstre:
- Overvej præstationsimplikationer: Avancerede mønstre kan introducere yderligere kompleksitet, hvilket kan påvirke ydeevnen. Vær opmærksom på præstationsimplikationerne og optimere hvor det er nødvendigt.
- Undgå anti-mønstre: Forstå mønstrene grundigt og undgå at falde i anti-mønstre eller misbruge dem. Brug mønstre, hvor de giver mening og stemmer overens med din applikations krav.
- Følg kodningskonventioner: Følg konsekvent kodningskonventioner for at bevare læsbarheden og konsistensen på tværs af din kodebase. Brug meningsfulde variabel- og funktionsnavne og giv klar dokumentation for dine mønstre.
Vær forsigtig, når du anvender disse mønstre
Modulmønsteret giver mulighed for indkapsling og fremmer databeskyttelse, kodeorganisering og oprettelse af selvstændige moduler.
På den anden side letter Observer-mønsteret kommunikation mellem komponenter ved at etablere et emne-abonnentforhold.
Du bør være opmærksom på potentielle faldgruber og almindelige fejl, når du implementerer avancerede JavaScript-mønstre. Undgå at overbruge mønstre, hvor der findes enklere løsninger, eller at skabe alt for kompleks kode. Gennemgå og refaktorér din kode regelmæssigt for at sikre, at den forbliver vedligeholdelsesdygtig.
