Singleton-Entwurfsmuster in JavaScript

Vorwort:

Entwurfsmuster sind in unserer Programmierung sehr wichtig!

Entwurfsmuster stellen bewährte Vorgehensweisen dar, die häufig von erfahrenen Entwicklern objektorientierter Software übernommen werden. Entwurfsmuster sind Lösungen für häufige Probleme, mit denen Softwareentwickler während des Softwareentwicklungsprozesses konfrontiert werden. Diese Lösungen sind das Ergebnis von Versuch und Irrtum zahlreicher Softwareentwickler über einen beträchtlichen Zeitraum.

Ich lerne gerade Designmuster. Möchtet ihr mitmachen?

1. Was ist ein Entwurfsmuster?

Im Softwaredesign eine prägnante und elegante Lösung für ein bestimmtes Problem.

Durch die Zusammenfassung bisheriger Erfahrungen und deren sinnvolle Anwendung auf ein bestimmtes Szenario können praktische Probleme gelöst werden.

2. Fünf Designprinzipien des Designmusters (SOLID)

S-Single-Responsibility-Prinzip

Das heißt, ein Programm kann nur eine Sache gut.

O-Auf-Zu-Prinzip

Offen für Erweiterungen, geschlossen für Änderungen

L-Liskov-Substitutionsprinzip

Unterklassen können übergeordnete Klassen überschreiben und dort erscheinen, wo übergeordnete Klassen erscheinen.

I-Schnittstellen-Unabhängigkeitsprinzip

Halten Sie die Schnittstelle einheitlich und unabhängig

D-Abhängigkeit führt zum Prinzip

Die Verwendungsmethode konzentriert sich nur auf die Schnittstelle und nicht auf die Implementierung der spezifischen Klasse

3. Warum brauchen wir Designmuster?

Lesbarkeit

Durch die Verwendung von Entwurfsmustern können Sie die Lesbarkeit unseres Codes verbessern und die nachfolgende Entwicklungseffizienz steigern.

Skalierbarkeit

Die Verwendung von Entwurfsmustern zum Entkoppeln von Code kann die Modifizierbarkeit und Erweiterbarkeit des Codes erheblich verbessern.

Wiederverwendbarkeit

Durch die Verwendung von Entwurfsmustern können Sie vorhandene Lösungen wiederverwenden, ohne die gleiche Arbeit wiederholen zu müssen

Zuverlässigkeit

Die Verwendung von Entwurfsmustern kann die Robustheit des Systems erhöhen und das Schreiben des Codes wirklich ingenieursorientiert gestalten.

4. Singleton-Muster

Definition: Einzigartig und weltweit zugänglich. Stellen Sie sicher, dass eine Klasse nur eine Instanz hat, und stellen Sie einen globalen Zugriffspunkt dafür bereit.

Ein weiteres Multiinstanzmuster besteht darin, mehrere verschiedene Instanzen über eine Klasse zu konstruieren. Dies ist das Multiinstanzmuster.

Der wesentlichste Unterschied zwischen dem Singleton-Modus und dem Multi-Instance-Modus: die Anzahl der Instanzen.

Das Singleton-Muster hat immer nur eine Instanz, die zwischengespeichert und wiederverwendet werden kann.

Anwendungsszenario: Inhalt, der zwischengespeichert werden kann, z. B. ein Anmelde-Popup-Fenster.

Ich denke, wenn dies eine Stelle ist, die in Ihrem Projekt zweimal oder öfter verwendet werden kann, können Sie dies versuchen, wodurch eine Menge Code eingespart werden kann.

Schauen wir uns diesen Pseudocode an:

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "Floating-Fenster für die Anmeldung";
    div.style.display = "keine";
    Dokument.body.appendChild(div);
    div zurückgeben;
};

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = creatLoginLayer();
    loginLayer.style.display = "Block";
};

Die Funktion von creatLoginLayer besteht darin, ein Anmelde-Popup-Fenster zu erstellen und den Knoten zum body hinzuzufügen. Das Folgende ist ein Klickereignis der Anmeldeschaltfläche. Durch Klicken auf die Anmeldeschaltfläche wird ein Anmelde-Popup-Fenster erstellt und display von none auf block geändert, um es anzuzeigen.

An dieser Logik ist nichts auszusetzen, aber denken Sie einmal darüber nach: Diese Codes werden jedes Mal ausgeführt, wenn auf die Anmeldeschaltfläche geklickt wird. Was ist, wenn es in einem Projekt viele Stellen gibt, die dies erfordern? Die Zeilen, die wir oben haben, sind nur ein paar kurze Zeilen. Was ist, wenn es Hunderte, Tausende oder sogar Zehntausende sind? Ist das nicht ein großer Leistungsverlust? Zu diesem Zeitpunkt ist unser Singleton-Modus praktisch.

Nach Verwendung des Singleton-Musters:

const getSingle = (fn) => {
    lass resultieren;
    return (...rest) => {
        Ergebnis zurückgeben || (Ergebnis = fn.apply(this.rest));
    };
};

const creatLoginLayer = () => {
    const div = document.createElement("div");
    div.innerHtml = "Floating-Fenster für die Anmeldung";
    div.style.display = "keine";
    Dokument.body.appendChild(div);
    div zurückgeben;
};

const createSingleLoginLayer = getSingle(createLoginLayer);

document.getElementById("loginBtn").onclick = () => {
    const loginLayer = createSingleLoginLayer();
    loginLayer.style.display = "Block";
};

Wie Sie sehen, wurde eine getSingle -Funktion hinzugefügt. Hier gibt es ein Konzept der Schließung. result wird nicht zerstört, solange auf sie verwiesen wird, was eine Cache-Funktion spielt. Der Parameter der Funktion ist eine function . Wenn result null oder undefined ist, wird die nachfolgende Logik ausgeführt und der Rückgabewert der übergebenen Funktion, d. h. das div, wird result zugewiesen. Auf diese Weise muss unsere folgende Funktion nur einmal ausgeführt werden. Beim nächsten Aufruf hat result einen Wert, sodass dieser direkt zurückgegeben wird, ohne dass die nachfolgende Logik ausgeführt wird.

Damit ist dieser Artikel über das Singleton-Muster-Entwurfsmuster in JavaScript abgeschlossen. Weitere Informationen zum Singleton-Muster in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!