Zusammenfassung von 6 Lösungen zur Implementierung des Singleton-Modus in JS

Vorwort

Heute habe ich das Erzeugungsmuster im Entwurfsmuster überprüft und festgestellt, dass es viele Möglichkeiten gibt, das Singleton-Muster in JS zu implementieren. Ich habe sie kurz zusammengefasst und die folgenden 6 Möglichkeiten aufgelistet, um sie mit Ihnen zu teilen.

Generell ist der Inhalt in zwei Teile gegliedert: ES5 (Funktion) und ES6 (Klasse) Implementierung.

Das Konzept des Singleton-Musters

Das Singleton-Muster dient zum Speichern einer Instanz im System, die eine globale Variable ist. Bei der Teamentwicklung können die Anforderungen unterschiedlich sein, um ähnliche Funktionen zu erreichen, z. B. die Formularvalidierung zwischen verschiedenen Seiten, aber die Namen können gleich sein, sodass es zu Konflikten kommt. Zu diesem Zeitpunkt kann das Singleton-Muster dieses Problem gut lösen.

• Eine Instanz wird nur einmal erstellt
• Stellen Sie sicher, dass eine Klasse nur eine Instanz hat, und stellen Sie einen globalen Zugriffspunkt dafür bereit
  

Sprechen Sie über seine Vorteile:

1. Das Singleton-Muster deklariert einen Namespace, der eine eindeutige globale Variable generiert, einen Namespace, der auf die gleiche Weise wie eine Objektdeklaration deklariert werden kann:

var mapleTao={ Name:"mapleTao",init:Funktion(){console.log(this.name)}};

Haben Sie festgestellt, dass dies einem Objekt ein wenig ähnelt? Tatsächlich sind Name und Init seine Eigenschaften. Sie können den Wert seines Namens über mapleTao.name abrufen und die Init-Methode über mapleTao.init () aufrufen. Auf diese Weise können Sie das Problem von Namenskonflikten gut lösen, wenn Sie mit mehreren Anforderungsseiten und der Entwicklung durch mehrere Personen zu tun haben, und den Code besser verwalten und steuern.

2. Der Singleton-Modus deklariert nur eine Variable im globalen Status. Wie wir alle wissen, wird in js, wenn Sie eine Methode wie die Funktion aa(){} schreiben, eine Variable namens aa im Fenster generiert. Wenn eine Funktion implementiert wird, werden in der Codekapselung viele Funktionen erstellt. Auf diese Weise werden im Fenster viele Variablen erstellt, die mehr Speichereinheiten belegen. Der Umfang globaler Variablen ist sehr groß und kann sich in vielen Verarbeitungsfunktionen ändern. Auf diese Weise ist es nicht einfach, Fehler schnell zu finden, wenn sie auftreten. Die im Singleton-Modus erstellten Objektvariablen können Probleme jedoch schneller finden und lösen, was die Zeit für die Problembehebung und das Laden des Systems erheblich verkürzt.

3. Es bietet mehr Vorteile in Bezug auf Speicher- und Ressourcennutzung als das Erstellen neuer Objekte durch new bei der Implementierung derselben Funktion.

Methode 1

Verwenden Sie instanceof, um zu bestimmen, ob das neue Schlüsselwort zum Aufrufen einer Funktion zum Instanziieren eines Objekts verwendet werden soll

Funktion Benutzer() {
    if (!(diese Instanz von Benutzer)) {
        zurückkehren
    }
    if (!Benutzer._Instanz) {
        this.name = "Unbenannt"
        Benutzer._Instanz = dies
    }
    returniere User._instance
}

const u1 = neuer Benutzer()
const u2 = neuer Benutzer()

console.log(u1===u2); // wahr

Methode 2

Fügen Sie den Methodenattributaufruf direkt zur Funktion hinzu, um eine Instanz zu generieren

Funktion Benutzer(){
    this.name = "Unbenannt"
}
Benutzer.getInstance = function(){
    wenn(!Benutzer._Instanz){
        User._instance = neuer Benutzer()
    }
    returniere User._instance
}

const u1 = Benutzer.getInstance()
const u2 = Benutzer.getInstance()

konsole.log(u1===u2);

Methode 3

Verwendung von Closures, verbesserte Methode 2

Funktion Benutzer() {
    this.name = "Unbenannt"
}
Benutzer.getInstance = (Funktion () {
    var-Instanz
    Rückgabefunktion () {
        wenn (!Instanz) {
            Instanz = neuer Benutzer()
        }
        Rückgabeinstanz
    }
})()

const u1 = Benutzer.getInstance()
const u2 = Benutzer.getInstance()

konsole.log(u1 === u2);

Methode 4

Implementiert durch Wrapper-Objekte in Kombination mit Closures

const Benutzer = (Funktion () {
    Funktion _user() {
        dieser.name = "xm"
    }
    Rückgabefunktion () {
        if (!_Benutzer.Instanz) {
            _user.instance = neuer _user()
        }
        returniere _user.instance
    }
})()

const u1 = neuer Benutzer()
const u2 = neuer Benutzer()

console.log(u1 === u2); // wahr

Natürlich kann der Closure-Code als Funktion gekapselt werden

Wenn Singletons häufig verwendet werden, empfiehlt es sich, eine Lösung zu verwenden, die dieser Methode ähnelt. Natürlich kann die interne Implementierung jede der oben genannten Methoden verwenden.

Funktion SingleWrapper(cons) {
    // Nicht-Funktionen und Pfeilfunktionen ausschließen, wenn (!(cons instanceof Function) || !cons.prototype) {
        throw new Error('Kein gültiger Konstruktor')
    }
    var-Instanz
    Rückgabefunktion () {
        wenn (!Instanz) {
            Instanz = neue Nachteile ()
        }
        Rückgabeinstanz
    }
}

Funktion Benutzer(){
    dieser.name = "xm"
}
const SingleUser = SingleWrapper(Benutzer)
const u1 = neuer SingleUser()
const u2 = neuer SingleUser()
konsole.log(u1 === u2);

Methode 5

Verwenden Sie new.target im Konstruktor, um zu bestimmen, ob das neue Schlüsselwort verwendet werden soll

Klasse Benutzer{
    Konstruktor(){
        if(neu.ziel !== Benutzer){
            zurückkehren
        }
        wenn(!Benutzer._Instanz){
            dieser.name = "xm"
            Benutzer._Instanz = dies
        }
        returniere User._instance
    }
}

const u1 = neuer Benutzer()
const u2 = neuer Benutzer()
konsole.log(u1 === u2);

Methode 6

Verwenden statischer Methoden

Klasse Benutzer {
    Konstruktor() {
        dieser.name = "xm"
    }
    statische getInstance() {
        if (!Benutzer._Instanz) {
            User._instance = neuer Benutzer()
        }
        returniere User._instance
    }
}


const u1 = Benutzer.getInstance()
const u2 = Benutzer.getInstance()

konsole.log(u1 === u2);

Zusammenfassen

Dies ist das Ende dieses Artikels über die JS-Implementierung des Singleton-Musters. Weitere relevante Inhalte zum JS-Singleton-Muster finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!