So implementieren Sie das Singleton-Muster in Javascript

Überblick

Das Singleton-Muster wird auch Monomer-Muster genannt und legt fest, dass eine Klasse nur eine Instanz hat und einen globalen Zugriffspunkt bereitstellt.

Bevor Sie diesen Artikel lesen, ist Ihnen das Konzept des Singleton-Musters möglicherweise unklar oder unklar, aber tatsächlich haben Sie das Singleton-Muster bei der täglichen Entwicklung verwendet.

In JavaScript gibt es keine Klassendefinition. Die Merkmale des Singleton-Musters sind „eindeutig“ und „globaler Zugriff“, daher können wir an das globale Objekt in JavaScript denken. Die Funktion von ES6s let, die keine wiederholten Deklarationen zulässt, erfüllt genau diese beiden Merkmale; ja, das globale Objekt ist das einfachste Singleton-Muster;

lass obj = {
    Name:"Gesalzener Fisch",
    getName:Funktion(){}
}

Aus dem obigen Code können wir erkennen, dass obj ein Singleton ist, da obj nur die beiden Eigenschaften des Singleton-Musters erfüllt: „eindeutig“ und „global zugänglich“.

Wir empfehlen jedoch nicht, Singletons auf diese Weise zu implementieren, da globale Objekte/globale Variablen einige Nachteile haben:

Verschmutzt den Namespace (es kommt leicht zu Namenskonflikten bei Variablen) und ist bei der Wartung nicht leicht zu kontrollieren (wenn Sie nicht aufpassen, wird es direkt überschrieben).

Code-Implementierung

Einfache Version des Singleton-Musters

Analyse: Es kann nur eine Instanz geben, daher müssen wir zur Beurteilung einen if-Zweig verwenden. Wenn sie bereits existiert, kehren Sie direkt zurück. Wenn sie nicht existiert, erstellen Sie eine neue Instanz.

let Singleton = Funktion(Name){
    dieser.name = Name;
    diese.Instanz = null; 
}

Singleton.prototype.getName = Funktion(){
    konsole.log(dieser.name);
}

Singleton.getInstance = Funktion(Name){
    wenn (diese.Instanz) {
        gib diese Instanz zurück; 
    }
    gib diese.Instanz zurück = neues Singleton(Name);
}

let winner = Singleton.getInstance("Gewinner"); //Gewinner
Konsole.log(Gewinner.getName());
let sunner = Singleton.getInstance("sunner"); //Gewinner
Konsole.log(sunner.getName())

Im obigen Code verwenden wir den Wert einer Variableninstanz, um zu bestimmen, ob bereits eine Instanz vorhanden ist. Wenn dies der Fall ist, geben wir direkt this.instance zurück. Wenn sie nicht vorhanden ist, erstellen wir eine neue Instanz und weisen sie der Instanz zu.

Es gibt jedoch immer noch Probleme mit dem obigen Code, da der Vorgang zum Erstellen eines Objekts und der Vorgang zum Beurteilen der Instanz miteinander gekoppelt sind, was nicht dem "Prinzip der Einzelverantwortung" entspricht.

Verbesserte Version

Idee: Verwenden Sie einen Abschluss, um den Vorgang zum Beurteilen der Instanz zu implementieren.

Closure-Warnung: Studenten, die Closures nicht verstehen, sollten zuerst Closures lernen

lass CreateSingleton = (Funktion(){
    lass Instanz = null;
    Rückgabefunktion (Name) {
        dieser.name = Name;
        wenn(Instanz){
            Rückgabeinstanz
        }
        Instanz zurückgeben = diese;
    }
})()


CreateSingleton.prototype.getName = Funktion(){
        konsole.log(dieser.name);
}

let winner = new CreateSingleton("Gewinner"); //Gewinner
Konsole.log(Gewinner.getName());
let sunner = new CreateSingleton("sunner"); //Gewinner
Konsole.log(sunner.getName())

Proxy-Version Singleton-Modus

Durch die Form des Proxys werden der Vorgang des Objekterstellens und der Vorgang der Instanzbeurteilung entkoppelt und aufgeteilt, um eine kleinere Granularitätsaufteilung zu erreichen, die dem „Prinzip der Einzelverantwortung“ entspricht.

lass ProxyCreateSingleton = (Funktion(){
    lass Instanz = null;
    Rückgabefunktion (Name) {
        wenn(Instanz){
            Rückgabeinstanz
        }
        gibt Instanz zurück = neuer Singlton(Name);
    }
})();

let Singlton = Funktion(Name){
    dieser.name = Name;
} 

Singlton.prototype.getName = Funktion(){
    konsole.log(dieser.name);
}

let Gewinner = neuer ProxyCreateSingleton("Gewinner");
Konsole.log(Gewinner.getName());
let sunner = neuer ProxyCreateSingleton("sunner");
console.log(sunner.getName());

Im obigen Code ist ProxyCreateSingleton() nur für die Beurteilung der Instanz verantwortlich, und Singlton ist nur für das Erstellen von Objekten und das Zuweisen von Werten verantwortlich.

Lazy Singleton-Muster

Wir begegnen häufig einem solchen Szenario: Eine Seite wird mehrmals aufgerufen und es werden Popup-Eingabeaufforderungen angezeigt, aber der Inhalt der Eingabeaufforderung ist unterschiedlich.

Zu diesem Zeitpunkt fällt uns sofort der Singleton-Modus ein. Das Popup-Fenster ist eine Singleton-Instanz und der Eingabeaufforderungsinhalt ist eine Parameterübergabe. Wir können den Lazy-Singleton-Modus verwenden, um ihn zu implementieren.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
</Kopf>
<Text>
    <div id="loginBtn">Gesalzener Fisch mit Träumen</div>
</body>
<Skript>
lass getSingleton = Funktion(fn) {
    var Ergebnis;
    return Funktion() {
        return result || (result = fn.apply(this, arguments)); // Bestimmen Sie diesen Kontext und übergeben Sie Parameter}
}
let createAlertMessage = Funktion (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    div.style.display = "keine";
    Dokument.body.appendChild(div);
    div zurückgeben;
}

let createSingleAlertMessage = getSingleton(createAlertMessage);
    document.getElementById('loginBtn').onclick=function(){
        let alertMessage = createSingleAlertMessage('Das scheint ein richtiger Idiot zu sein');
        alertMessage.style.display = "Block";
    }
</Skript>
</html>

Lazy Singleton bedeutet, dass unsere Instanz nicht erstellt wird, wenn die Seite geladen wird. Die Instanz wird erst erstellt, nachdem wir auf das Div der Seite geklickt haben (erstellt bei Bedarf). Dies kann die Leistung unserer Webseiten verbessern und das Rendern unserer Seiten beschleunigen.

Oben finden Sie Einzelheiten zur Implementierung des Singleton-Musters mit Javascript. Weitere Informationen zum Javascript-Singleton-Muster finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!