JavaScript-ontwerppatronen gebruiken

JavaScript-ontwerppatronen bieden bewezen oplossingen voor veelvoorkomende problemen bij softwareontwikkeling. Als u deze patronen begrijpt en toepast, kunt u betere, efficiëntere JavaScript-code schrijven.

Inleiding tot JavaScript-ontwerppatronen

De concepten in JavaScript-ontwerppatronen dienen als leidraad voor het oplossen van veelvoorkomende problemen waarmee u als JavaScript-ontwikkelaar te maken krijgt.

U moet de onderliggende abstracties achter de patronen begrijpen, zodat u ze op uw specifieke probleem kunt toepassen. U zou ook moeten kunnen identificeren wanneer een van de genoemde patronen nuttig kan zijn voor uw code.

Het modulepatroon

Het modulepatroon, dat zorgt voor inkapseling, maakt deel uit van Het modulesysteem van JavaScript. Het biedt een manier om privégegevens en gedrag binnen een module te beveiligen terwijl een openbare API wordt vrijgegeven. Hiermee kunt u zelfstandige module-objecten maken met privé- en openbare toegangsniveaus.

Dit is een beetje zoals hoe het kan gebruik toegangsmodificaties voor een klasse in een taal zoals Java of C++.

In JavaScript kunt u het modulepatroon implementeren met behulp van sluitingen.

Door een afsluiting te gebruiken om privéleden (functies, variabelen, gegevens) in te sluiten, creëert u een bereik waarin deze leden toegankelijk zijn maar niet direct worden blootgesteld aan de buitenwereld. Dit helpt om inkapseling te bereiken, waardoor de interne details verborgen blijven voor externe code.

Bovendien geeft het retourneren van een openbare API uit de sluiting privétoegang tot bepaalde functies of eigenschappen die u wilt weergeven als onderdeel van de interface van de module.

Dit geeft u controle over welke delen van de module toegankelijk zijn voor andere delen van de codebasis. Dat handhaaft een duidelijke grens tussen publieke en private functionaliteit.

Hier is een voorbeeld:

const ShoppingCartModule = (functie () {
// Privégegevens
laten winkelwagenItems = [];
// Privé methode
functieberekenTotalItems() {
opbrengst winkelwagenItems.verminderen((totaal, stuk) => totaal + item.hoeveelheid, 0);
 }
// Openbare API
opbrengst {
 addItem (item) {
 cartItems.push (artikel);
 },
 getTotalItems() {
opbrengst berekenTotalItems();
 },
 clearCart() {
 winkelwagenItems = [];
 }
 };
})();
// Gebruiksvoorbeeld
ShoppingCartModule.addItem({ naam: 'Product 1', hoeveelheid: 2 });
ShoppingCartModule.addItem({ naam: 'Product 2', hoeveelheid: 1 });
troosten.log (ShoppingCartModule.getTotalItems()); // Uitvoer: 3
ShoppingCartModule.clearCart();
troosten.log (ShoppingCartModule.getTotalItems()); // Uitvoer: 0

In dit voorbeeld is de ShoppingCartModule vertegenwoordigt een module die is gemaakt met behulp van het modulepatroon. De uitvoering van de code gaat als volgt:

1. De IIFE verpakt het hele codeblok, waardoor een functie ontstaat die onmiddellijk wordt uitgevoerd bij declaratie. Dit zorgt voor een eigen bereik voor de leden van de module.
2. winkelwagenItems is een privéarray. Het is niet direct toegankelijk van buiten de module.
3. berekenTotalItems() is een privémethode die het totale aantal artikelen in de winkelwagen berekent. Het gebruikt de verminderen() methode om te herhalen over de winkelwagenItems matrix en som de hoeveelheden van alle items op.
4. De module retourneert zijn openbare API als een letterlijk object, waardoor drie openbare methoden worden blootgelegd: Voeg item toe(), getTotalItems(), En clearCart().
5. Buiten de module kunt u toegang krijgen tot de openbare methoden van de module om te communiceren met de functionaliteit van het winkelwagentje.

Dit voorbeeld laat zien hoe u met het modulepatroon privégegevens kunt inkapselen (winkelwagenItems) en gedrag (berekenTotalItems) binnen de module terwijl een openbare interface (Voeg item toe, getTotalItems, En clearCart) om te communiceren met de module.

Het waarnemerspatroon

Het Observer-patroon zorgt voor een een-op-veel-afhankelijkheid tussen objecten. Wanneer de status van een object verandert, stelt het alle personen ten laste hiervan op de hoogte en worden ze automatisch bijgewerkt. Dit patroon is met name handig voor het beheren van door gebeurtenissen gestuurde interacties of het ontkoppelen van componenten in een systeem.

In JavaScript kunt u het Observer-patroon implementeren met behulp van de ingebouwde addEventListener, verzendingEvenement methodes, of welke dan ook mechanismen voor het afhandelen van gebeurtenissen. Door waarnemers te abonneren op gebeurtenissen of onderwerpen, kunt u hen op de hoogte stellen en bijwerken wanneer specifieke gebeurtenissen plaatsvinden.

U kunt bijvoorbeeld het Observer-patroon gebruiken om een ​​eenvoudig meldingssysteem te implementeren:

// Observer-patroonimplementatie
functieNotificatieSysteem() {
// Lijst met abonnees
dit.abonnees = [];
// Methode om je te abonneren op meldingen
dit.abonneren = functie (abonnee) {
dit.abonnees.push (abonnee);
 };
// Methode om u af te melden voor meldingen
dit.afmelden = functie (abonnee) {
const indexeren = dit.subscribers.indexOf (abonnee);
als (index !== -1) {
dit.subscribers.splice (index, 1);
 }
 };
// Methode om abonnees op de hoogte te stellen
dit.melding = functie (bericht) {
dit.abonnees.voorElk(functie (abonnee) {
 abonnee.ontvangstNotificatie (bericht);
 });
 };
}
// Abonnee-object
functieAbonnee(naam) {
// Methode om meldingen te ontvangen en af ​​te handelen
dit.ontvangstmelding = functie (bericht) {
troosten.log (naam + ' ontvangen melding: ' + bericht);
 };
}
// Gebruiksvoorbeeld
const meldingSysteem = nieuw Meldingssysteem();
// Creëer abonnees
const abonnee1 = nieuw Abonnee('Abonnee 1');
const abonnee2 = nieuw Abonnee('Abonnee 2');
// Abonneer u op het notificatiesysteem
notificatieSysteem.subscribe (abonnee1);
notificatieSysteem.subscribe (abonnee2);
// Breng abonnees op de hoogte
notificatiesysteem.notify('Nieuwe melding!');

Het doel hier is om meerdere abonnees in staat te stellen meldingen te ontvangen wanneer een specifieke gebeurtenis plaatsvindt.

De NotificatieSysteem functie vertegenwoordigt het systeem dat meldingen verzendt, en de Abonnee functie vertegenwoordigt de ontvangers van de meldingen.

Het NotificationSystem heeft een array genaamd abonnees om de abonnees op te slaan die meldingen willen ontvangen. De abonneren Met deze methode kunnen abonnees zich registreren door zichzelf toe te voegen aan de abonnee-array. De uitschrijven methode zou abonnees uit de array verwijderen.

De melden methode in NotificationSystem doorloopt de abonnee-array en roept de notificatie ontvangen methode op elke abonnee, zodat ze de meldingen kunnen afhandelen.

Instanties van de abonneefunctie vertegenwoordigen abonnees. Elke abonnee heeft een ReceiveNotification-methode die bepaalt hoe ze omgaan met de ontvangen meldingen. In dit voorbeeld logt de methode het ontvangen bericht naar de console.

Maak een exemplaar van NotificationSystem om het waarnemerspatroon te gebruiken. U kunt vervolgens exemplaren van de abonnee maken en deze toevoegen aan het meldingssysteem met behulp van de abonneermethode.

Het verzenden van een melding activeert de methode ReceiveNotification voor elke abonnee en registreert het bericht voor elke abonnee.

Het Observer-patroon maakt een losse koppeling mogelijk tussen het notificatiesysteem en abonnees, wat zorgt voor flexibiliteit. Het patroon bevordert de scheiding van zorgen, waardoor onderhoud in gebeurtenisgestuurde systemen gemakkelijker wordt.

Geavanceerde JavaScript-patronen gebruiken

Hier zijn enkele algemene tips voor het effectief gebruiken van geavanceerde JavaScript-patronen:

• Overweeg prestatie-implicaties: geavanceerde patronen kunnen extra complexiteit introduceren, wat van invloed kan zijn op de prestaties. Houd rekening met de gevolgen voor de prestaties en optimaliseren waar nodig.
• Vermijd antipatronen: Begrijp de patronen grondig en voorkom dat u in antipatronen vervalt of ze verkeerd gebruikt. Gebruik patronen waar ze logisch zijn en aansluiten bij de vereisten van uw toepassing.
• Volg coderingsconventies: volg consistent coderingsconventies om de leesbaarheid en consistentie van uw codebasis te behouden. Gebruik betekenisvolle variabele- en functienamen en zorg voor duidelijke documentatie voor uw patronen.

Wees voorzichtig bij het toepassen van deze patronen

Het modulepatroon maakt inkapseling mogelijk en bevordert gegevensprivacy, codeorganisatie en het maken van op zichzelf staande modules.

Aan de andere kant vergemakkelijkt het Observer-patroon de communicatie tussen componenten door een onderwerp-abonnee-relatie tot stand te brengen.

U moet zich bewust zijn van mogelijke valkuilen en veelvoorkomende fouten bij het implementeren van geavanceerde JavaScript-patronen. Vermijd overmatig gebruik van patronen waar eenvoudigere oplossingen voor bestaan ​​of het creëren van te complexe code. Controleer en refactor uw code regelmatig om ervoor te zorgen dat deze onderhoudbaar blijft.