So verwenden Sie JavaScript-Designmuster

JavaScript-Entwurfsmuster bieten bewährte Lösungen für häufige Probleme in der Softwareentwicklung. Wenn Sie diese Muster verstehen und anwenden, können Sie besseren und effizienteren JavaScript-Code schreiben.

Einführung in JavaScript-Designmuster

Die in den JavaScript-Entwurfsmustern enthaltenen Konzepte dienen als Leitfaden für die Bewältigung häufiger Probleme, mit denen Sie als JavaScript-Entwickler konfrontiert werden.

Sie sollten die zugrunde liegenden Abstraktionen hinter den Mustern verstehen, damit Sie sie auf Ihr spezielles Problem anwenden können. Sie sollten auch erkennen können, wann eines dieser Muster für Ihren Code nützlich sein kann.

Das Modulmuster

Das Modulmuster, das die Kapselung bereitstellt, ist Teil davon Das Modulsystem von JavaScript. Es bietet eine Möglichkeit, private Daten und Verhalten innerhalb eines Moduls zu schützen und gleichzeitig eine öffentliche API verfügbar zu machen. Sie können damit eigenständige Modulobjekte mit privaten und öffentlichen Zugriffsebenen erstellen.

Das ist ein bisschen so, wie man es kann Verwenden Sie Zugriffsmodifikatoren für eine Klasse in einer Sprache wie Java oder C++.

In JavaScript können Sie das Modulmuster mithilfe von Abschlüssen implementieren.

Durch die Verwendung eines Abschlusses zum Einschließen privater Mitglieder (Funktionen, Variablen, Daten) erstellen Sie einen Bereich, in dem diese Mitglieder zugänglich, aber nicht direkt der Außenwelt zugänglich sind. Dies trägt zur Kapselung bei und hält die internen Details vor externem Code verborgen.

Darüber hinaus ermöglicht die Rückgabe einer öffentlichen API aus dem Abschluss privaten Zugriff auf bestimmte Funktionen oder Eigenschaften, die Sie als Teil der Modulschnittstelle verfügbar machen möchten.

Dadurch haben Sie die Kontrolle darüber, welche Teile des Moduls für andere Teile der Codebasis zugänglich sind. Dadurch bleibt eine klare Grenze zwischen öffentlicher und privater Funktionalität bestehen.

Hier ist ein Beispiel:

const ShoppingCartModule = (Funktion () {
// Private Daten
lassen cartItems = [];
// Private Methode
FunktionberechneTotalItems() {
zurückkehren cartItems.reduce((Gesamt, Artikel) => Gesamt + Artikelmenge, 0);
 }
// Öffentliche API
zurückkehren {
 addItem (Element) {
 cartItems.push (Artikel);
 },
 getTotalItems() {
zurückkehren berechneTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Anwendungsbeispiel
ShoppingCartModule.addItem({ Name: „Produkt 1“, Menge: 2 });
ShoppingCartModule.addItem({ Name: „Produkt 2“, Menge: 1 });
Konsole.log (ShoppingCartModule.getTotalItems()); // Ausgabe: 3
ShoppingCartModule.clearCart();
Konsole.log (ShoppingCartModule.getTotalItems()); // Ausgabe: 0

In diesem Beispiel ist die ShoppingCartModule stellt ein Modul dar, das mit dem Modulmuster erstellt wurde. Die Codeausführung läuft so ab:

1. Der IIFE umschließt den gesamten Codeblock und erstellt eine Funktion, die sofort nach der Deklaration ausgeführt wird. Dadurch wird ein privater Bereich für die Mitglieder des Moduls eingerichtet.
2. warenkorbArtikel ist ein privates Array. Es ist nicht direkt von außerhalb des Moduls zugänglich.
3. berechneTotalItems() ist eine private Methode, die die Gesamtzahl der Artikel im Warenkorb berechnet. Es nutzt die reduzieren() Methode zum Durchlaufen der warenkorbArtikel Array und summieren Sie die Mengen aller Artikel.
4. Das Modul gibt seine öffentliche API als Objektliteral zurück und stellt drei öffentliche Methoden bereit: Artikel hinzufügen(), getTotalItems(), Und clearCart().
5. Außerhalb des Moduls können Sie auf die öffentlichen Methoden des Moduls zugreifen, um mit der Warenkorbfunktion zu interagieren.

Dieses Beispiel zeigt, wie Sie mit dem Modulmuster private Daten kapseln können (warenkorbArtikel) und Verhalten (berechneTotalItems) innerhalb des Moduls und stellt gleichzeitig eine öffentliche Schnittstelle bereit (Artikel hinzufügen, getTotalItems, Und klarCart), um mit dem Modul zu interagieren.

Das Beobachtermuster

Das Observer-Muster stellt eine Eins-zu-Viele-Abhängigkeit zwischen Objekten her. Wenn sich der Status eines Objekts ändert, benachrichtigt es alle seine abhängigen Objekte und sie werden automatisch aktualisiert. Dieses Muster ist besonders nützlich für die Verwaltung ereignisgesteuerter Interaktionen oder die Entkopplung von Komponenten in einem System.

In JavaScript können Sie das Observer-Muster implementieren mit dem integrierten addEventListener, Versandereignis Methoden oder andere Mechanismen zur Ereignisbehandlung. Indem Sie Beobachter zu Ereignissen oder Themen abonnieren, können Sie sie benachrichtigen und aktualisieren, wenn bestimmte Ereignisse auftreten.

Sie können beispielsweise das Observer-Muster verwenden, um ein einfaches Benachrichtigungssystem zu implementieren:

// Implementierung des Beobachtermusters
FunktionBenachrichtigungssystem() {
// Liste der Abonnenten
Das.subscribers = [];
// Methode zum Abonnieren von Benachrichtigungen
Das.subscribe = Funktion (Teilnehmer) {
Das.subscribers.push (Abonnent);
 };
// Methode zum Abbestellen von Benachrichtigungen
Das.unsubscribe = Funktion (Teilnehmer) {
const Index = Das.subscribers.indexOf (Abonnent);
Wenn (Index !== -1) {
Das.subscribers.splice (Index, 1);
 }
 };
// Methode zur Benachrichtigung von Abonnenten
Das.notify = Funktion (Nachricht) {
Das.subscribers.forEach(Funktion (Teilnehmer) {
 subscriber.receiveNotification (Nachricht);
 });
 };
}
// Abonnentenobjekt
FunktionTeilnehmer(Name) {
// Methode zum Empfangen und Verarbeiten von Benachrichtigungen
Das.receiveNotification = Funktion (Nachricht) {
Konsole.log (Name + ' Benachrichtigung erhalten: ' + Nachricht);
 };
}
// Anwendungsbeispiel
const Benachrichtigungssystem = neu NotificationSystem();
// Abonnenten erstellen
const Abonnent1 = neu Teilnehmer(„Abonnent 1“);
const Abonnent2 = neu Teilnehmer(„Abonnent 2“);
// Abonnieren Sie Abonnenten für das Benachrichtigungssystem
notificationSystem.subscribe (Abonnent1);
notificationSystem.subscribe (Abonnent2);
// Abonnenten benachrichtigen
notificationSystem.notify(„Neue Benachrichtigung!“);

Das Ziel besteht darin, mehreren Abonnenten den Empfang von Benachrichtigungen zu ermöglichen, wenn ein bestimmtes Ereignis eintritt.

Der Benachrichtigungssystem Die Funktion stellt das System dar, das Benachrichtigungen sendet, und die Teilnehmer Die Funktion stellt die Empfänger der Benachrichtigungen dar.

Das NotificationSystem verfügt über ein Array namens Abonnenten um die Abonnenten zu speichern, die Benachrichtigungen erhalten möchten. Der abonnieren Mit dieser Methode können sich Abonnenten registrieren, indem sie sich selbst zum Abonnenten-Array hinzufügen. Der abbestellen Die Methode würde Abonnenten aus dem Array entfernen.

Der benachrichtigen Die Methode in NotificationSystem durchläuft das Abonnenten-Array und ruft die auf Benachrichtigung erhalten Methode für jeden Abonnenten, der es ihm ermöglicht, die Benachrichtigungen zu verarbeiten.

Instanzen der Subscriber-Funktion repräsentieren Abonnenten. Jeder Abonnent verfügt über eine Methode „receiveNotification“, die bestimmt, wie er mit den empfangenen Benachrichtigungen umgeht. In diesem Beispiel protokolliert die Methode die empfangene Nachricht in der Konsole.

Um das Beobachtermuster zu verwenden, erstellen Sie eine Instanz von NotificationSystem. Anschließend können Sie Instanzen von Subscriber erstellen und diese mithilfe der subscribe-Methode zum Benachrichtigungssystem hinzufügen.

Durch das Versenden einer Benachrichtigung wird die Methode „receiveNotification“ für jeden Abonnenten ausgelöst und die Nachricht für jeden Abonnenten protokolliert.

Das Observer-Muster ermöglicht eine lose Kopplung zwischen dem Benachrichtigungssystem und den Abonnenten und sorgt so für Flexibilität. Das Muster fördert die Trennung von Belangen, was die Wartung in ereignisgesteuerten Systemen erleichtert.

Verwendung erweiterter JavaScript-Muster

Hier sind einige allgemeine Tipps für die effektive Nutzung erweiterter JavaScript-Muster:

• Berücksichtigen Sie Auswirkungen auf die Leistung: Erweiterte Muster können zu zusätzlicher Komplexität führen, die sich auf die Leistung auswirken kann. Beachten Sie die Auswirkungen auf die Leistung und optimieren, wo nötig.
• Vermeiden Sie Anti-Muster: Verstehen Sie die Muster gründlich und vermeiden Sie es, in Anti-Muster zu verfallen oder sie zu missbrauchen. Verwenden Sie Muster dort, wo sie sinnvoll sind und den Anforderungen Ihrer Anwendung entsprechen.
• Befolgen Sie Codierungskonventionen: Befolgen Sie konsequent Codierungskonventionen, um die Lesbarkeit und Konsistenz Ihrer Codebasis zu gewährleisten. Verwenden Sie aussagekräftige Variablen- und Funktionsnamen und stellen Sie eine klare Dokumentation Ihrer Muster bereit.

Seien Sie vorsichtig, wenn Sie diese Muster anwenden

Das Modulmuster ermöglicht die Kapselung und fördert den Datenschutz, die Codeorganisation und die Erstellung eigenständiger Module.

Andererseits erleichtert das Observer-Muster die Kommunikation zwischen Komponenten, indem es eine Subjekt-Abonnenten-Beziehung herstellt.

Sie sollten sich möglicher Fallstricke und häufiger Fehler bei der Implementierung erweiterter JavaScript-Muster bewusst sein. Vermeiden Sie die übermäßige Verwendung von Mustern, wenn es einfachere Lösungen gibt, oder die Erstellung von übermäßig komplexem Code. Überprüfen und überarbeiten Sie Ihren Code regelmäßig, um sicherzustellen, dass er wartbar bleibt.