Slik bruker du JavaScript-designmønstre

JavaScript-designmønstre gir utprøvde løsninger på vanlige problemer innen programvareutvikling. Hvis du forstår og bruker disse mønstrene, kan du skrive bedre og mer effektiv JavaScript-kode.

Introduksjon til JavaScript-designmønstre

Konseptene i JavaScript-designmønstre tjener til å veilede deg om hvordan du kan overvinne vanlige problemer du vil møte som JavaScript-utvikler.

Du bør forstå de underliggende abstraksjonene bak mønstrene, slik at du kan bruke dem på ditt spesielle problem. Du bør også kunne identifisere når noen av de nevnte mønstrene kan være nyttige for koden din.

Modulmønsteret

Modulmønsteret, som gir innkapsling, er en del av JavaScripts modulsystem. Det gir en måte å sikre private data og atferd i en modul mens du avslører en offentlig API. Den lar deg lage selvstendige modulobjekter med private og offentlige tilgangsnivåer.

Dette er litt sånn du kan bruk tilgangsmodifikatorer på en klasse på et språk som Java eller C++.

I JavaScript kan du implementere modulmønsteret ved å bruke lukkinger.

Ved å bruke en stenging for å omslutte private medlemmer (funksjoner, variabler, data), oppretter du et scope hvor disse medlemmene er tilgjengelige, men ikke direkte eksponert for omverdenen. Dette bidrar til å oppnå innkapsling, og holder de interne detaljene skjult for ekstern kode.

I tillegg gir retur av en offentlig API fra stengingen privat tilgang til visse funksjoner eller egenskaper som du ønsker å eksponere som en del av modulens grensesnitt.

Dette vil gi deg kontroll over hvilke deler av modulen som er tilgjengelig for andre deler av kodebasen. Det opprettholder en klar grense mellom offentlig og privat funksjonalitet.

Her er et eksempel:

konst ShoppingCartModule = (funksjon () {
// Private data
la cartItems = [];
// Privat metode
funksjonberegneTotalItems() {
komme tilbake cartItems.reduce((totalt, vare) => totalt + item.quantity, 0);
 }
// Offentlig API
komme tilbake {
 addItem (item) {
 cartItems.push (vare);
 },
 getTotalItems() {
komme tilbake calculateTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Brukseksempel
ShoppingCartModule.addItem({ Navn: 'Produkt 1', mengde: 2 });
ShoppingCartModule.addItem({ Navn: 'Produkt 2', mengde: 1 });
konsoll.log (ShoppingCartModule.getTotalItems()); // Utgang: 3
ShoppingCartModule.clearCart();
konsoll.log (ShoppingCartModule.getTotalItems()); // Utgang: 0

I dette eksemplet er Handlevognmodul representerer en modul opprettet ved hjelp av modulmønsteret. Kodekjøringen går slik:

1. De IIFE bryter hele kodeblokken, og skaper en funksjon som utføres umiddelbart ved erklæring. Dette etablerer et privat omfang for modulens medlemmer.
2. cartItems er et privat array. Den er ikke direkte tilgjengelig fra utsiden av modulen.
3. calculateTotalItems() er en privat metode som beregner totalt antall varer i handlekurven. Den bruker redusere() metode for å iterere over cartItems array og summerer mengdene av alle varer.
4. Modulen returnerer sin offentlige API som et bokstavelig objekt, og avslører tre offentlige metoder: addItem(), getTotalItems(), og clearCart().
5. Utenfor modulen kan du få tilgang til modulens offentlige metoder for å samhandle med handlekurvfunksjonaliteten.

Dette eksemplet viser hvordan modulmønsteret lar deg kapsle inn private data (cartItems) og oppførsel (beregneTotalItems) i modulen samtidig som det gir et offentlig grensesnitt (addItem, getTotalItems, og clearCart) for å samhandle med modulen.

Observatørmønsteret

Observer-mønsteret etablerer en en-til-mange-avhengighet mellom objekter. Når tilstanden til ett objekt endres, varsler det alle pårørende, og de oppdateres automatisk. Dette mønsteret er spesielt nyttig for å administrere hendelsesdrevne interaksjoner eller frakobling av komponenter i et system.

I JavaScript kan du implementere Observer-mønsteret ved å bruke den innebygde addEventListener, dispatchEvent metoder eller noen hendelseshåndteringsmekanismer. Ved å abonnere observatører på hendelser eller emner, kan du varsle og oppdatere dem når spesifikke hendelser inntreffer.

For eksempel kan du bruke Observer-mønsteret til å implementere et enkelt varslingssystem:

// Observatørmønsterimplementering
funksjonMeldingssystem() {
// Liste over abonnenter
dette.subscribers = [];
// Metode for å abonnere på varsler
dette.subscribe = funksjon (abonnent) {
dette.subscribers.push (abonnent);
 };
// Metode for å avslutte abonnementet på varsler
dette.unsubscribe = funksjon (abonnent) {
konst indeks = dette.subscribers.indexOf (abonnent);
hvis (indeks !== -1) {
dette.subscribers.splice (indeks, 1);
 }
 };
// Metode for å varsle abonnenter
dette.varsle = funksjon (beskjed) {
dette.subscribers.forEach(funksjon (abonnent) {
 subscriber.receiveNotification (melding);
 });
 };
}
// Abonnentobjekt
funksjonAbonnent(Navn) {
// Metode for å motta og håndtere varsler
dette.receiveNotification = funksjon (beskjed) {
konsoll.log (navn + ' mottok varsel: ' + melding);
 };
}
// Brukseksempel
konst notificationSystem = ny NotificationSystem();
// Opprett abonnenter
konst abonnent1 = ny Abonnent('Abonnent 1');
konst abonnent2 = ny Abonnent('Abonnent 2');
// Abonner abonnenter på varslingssystemet
notificationSystem.subscribe (abonnent1);
notificationSystem.subscribe (abonnent2);
// Varsle abonnenter
notificationSystem.notify('Ny melding!');

Målet her er å la flere abonnenter motta varsler når en spesifikk hendelse inntreffer.

De Meldingssystem funksjonen representerer systemet som sender varsler, og Abonnent funksjonen representerer mottakerne av varslene.

Meldingssystemet har en array kalt abonnenter for å lagre abonnentene som ønsker å motta varsler. De abonnere metoden lar abonnenter registrere seg ved å legge seg selv til abonnentgruppen. De Avslutte abonnementet metoden ville fjerne abonnenter fra arrayet.

De gi beskjed metoden i NotificationSystem itererer gjennom abonnentgruppen og kaller motta varsel metode på hver abonnent, slik at de kan håndtere varslene.

Forekomster av Abonnent-funksjonen representerer abonnenter. Hver abonnent har en receiveNotification-metode som bestemmer hvordan de håndterer de mottatte varslene. I dette eksemplet logger metoden den mottatte meldingen til konsollen.

For å bruke observatørmønsteret, opprett en forekomst av NotificationSystem. Du kan deretter opprette forekomster av abonnent og legge dem til i varslingssystemet ved å bruke abonnentmetoden.

Å sende ut et varsel vil utløse receiveNotification-metoden for hver abonnent, og logge meldingen for hver abonnent.

Observer-mønsteret muliggjør løs kobling mellom varslingssystemet og abonnenter, noe som gir fleksibilitet. Mønsteret fremmer separering av bekymringer som vil gjøre vedlikehold i hendelsesdrevne systemer enklere.

Bruke avanserte JavaScript-mønstre

Her er noen generelle tips for effektiv bruk av avanserte JavaScript-mønstre:

• Vurder ytelsesimplikasjoner: Avanserte mønstre kan introdusere ytterligere kompleksitet, noe som kan påvirke ytelsen. Vær oppmerksom på ytelsesimplikasjonene og optimalisere der det er nødvendig.
• Unngå anti-mønstre: Forstå mønstrene grundig og unngå å falle inn i anti-mønstre eller misbruke dem. Bruk mønstre der de gir mening og samsvarer med applikasjonens krav.
• Følg kodekonvensjonene: Følg konvensjonene for koding konsekvent for å opprettholde lesbarhet og konsistens på tvers av kodebasen. Bruk meningsfulle variabel- og funksjonsnavn og gi tydelig dokumentasjon for mønstrene dine.

Vær forsiktig når du bruker disse mønstrene

Modulmønsteret tillater innkapsling og fremmer datapersonvern, kodeorganisering og oppretting av selvstendige moduler.

På den annen side letter Observer-mønsteret kommunikasjon mellom komponenter ved å etablere et subjekt-abonnentforhold.

Du bør være klar over potensielle fallgruver og vanlige feil når du implementerer avanserte JavaScript-mønstre. Unngå å overbruke mønstre der det finnes enklere løsninger eller lage altfor kompleks kode. Gjennomgå og refaktorer koden din regelmessig for å sikre at den forblir vedlikeholdbar.