Heim  >  Artikel  >  Web-Frontend  >  Vertiefendes Verständnis der JavaScript-Reihe (25): Detaillierte Erläuterung des Singleton-Musters von Entwurfsmustern_Grundkenntnisse

Vertiefendes Verständnis der JavaScript-Reihe (25): Detaillierte Erläuterung des Singleton-Musters von Entwurfsmustern_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 16:11:30876Durchsuche

Einführung

Ab diesem Kapitel werden wir schrittweise die Implementierung verschiedener in JavaScript verwendeter Entwurfsmuster vorstellen. Hier werde ich nicht zu viel über die Theorie des Musters selbst vorstellen, sondern mich nur auf die Implementierung konzentrieren. OK, es hat offiziell begonnen.

In den Augen traditioneller Entwicklungsingenieure besteht die Implementierungsmethode darin, sicherzustellen, dass eine Klasse nur eine Instanz hat. Wenn sie vorhanden ist, wird sie direkt zurückgegeben , erstellen und zurückgeben. Dadurch wird sichergestellt, dass eine Klasse nur ein Instanzobjekt hat. In JavaScript fungiert ein Singleton als Namespace-Anbieter und stellt einen eindeutigen Zugriffspunkt auf das Objekt aus dem globalen Namespace bereit.

Text

In JavaScript gibt es viele Möglichkeiten, Singletons zu implementieren. Eine der einfachsten Möglichkeiten ist die Verwendung von Objektliteralen, die eine große Anzahl von Eigenschaften und Methoden enthalten können:

Code kopieren Der Code lautet wie folgt:

var mySingleton = {
Eigenschaft1: „etwas“,
Property2: „etwas anderes“,
Methode 1: Funktion () {
console.log('hello world');
}
};

Wenn Sie dieses Objekt später erweitern, können Sie Ihre eigenen privaten Mitglieder und Methoden hinzufügen und dann Schließungen verwenden, um diese Variablen- und Funktionsdeklarationen darin zu kapseln. Stellen Sie nur die öffentlichen Mitglieder und Methoden bereit, die Sie verfügbar machen möchten. Der Beispielcode lautet wie folgt:
Code kopieren Der Code lautet wie folgt:

var mySingleton = function () {

/* Hier private Variablen und Methoden deklarieren */
var privateVariable = 'etwas Privates';
Funktion showPrivate() {
console.log(privateVariable);
}

/* Öffentliche Variablen und Methoden (auf private Variablen und Methoden kann zugegriffen werden) */
Geben Sie {
zurück          publicMethod: function () {
              showPrivate();
},
publicVar: 'Die Öffentlichkeit kann das sehen!'
};
};

var single = mySingleton();
single.publicMethod(); // „Etwas Privates“ ausgeben
console.log(single.publicVar); // Ausgabe „Die Öffentlichkeit kann dies sehen!“

Der obige Code ist sehr gut, aber was ist, wenn wir ihn nur initialisieren möchten, wenn er verwendet wird? Um Ressourcen zu sparen, können wir diese Codes wie folgt in einem anderen Konstruktor initialisieren:

Code kopieren Der Code lautet wie folgt:

var Singleton = (function () {
var instanziiert;
Funktion init() {
/*Singleton-Code hier definieren*/
         return {
              publicMethod: function () {
console.log('hello world');
            },
             publicProperty: 'test'
        };
}

zurück {
         getInstance: function () {
                if (!instanziiert) {
                         instanziiert = init();
            }
             Rückgabe instanziiert;
}
};
})();

/*Öffentliche Methoden aufrufen, um Instanzen abzurufen:*/
Singleton.getInstance().publicMethod();

Wir wissen jetzt, wie man einen Singleton implementiert, aber in welchen Szenarien wird ein Singleton am besten verwendet? Tatsächlich werden Singletons im Allgemeinen verwendet, um verschiedene Kommunikationsmodi zwischen Systemen zu koordinieren. Der folgende Code ist eine bewährte Methode für einen Singleton:

Code kopieren Der Code lautet wie folgt:

var SingletonTester = (function () {

//Parameter: eine Reihe von Parametern, die an den Singleton
übergeben werden Funktion Singleton(args) {

//Setzen Sie die Variable args auf die empfangenen Parameter oder leer (falls nicht angegeben)
var args = args ||. {};
//Legen Sie den Namensparameter fest
This.name = 'SingletonTester';
//Setze den Wert von pointX
This.pointX = args.pointX ||. 6; //Erhalten Sie es aus den empfangenen Parametern oder setzen Sie es auf den Standardwert
//Setze den Wert von pointY
This.pointY = args.pointY || 10;

}

//Instanzcontainer
var-Instanz;

var _static = {
Name: 'SingletonTester',

//Methode zum Abrufen der Instanz
//Singleton-Instanz zurückgeben
         getInstance: Funktion (Argumente) {
If (Instanz === undefiniert) {
                    Instanz = new Singleton(args);
            }
             Instanz zurückgeben;
}
};
Geben Sie _static;
zurück })();

var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // Ausgabe 5

Andere Implementierungsmethoden

Methode 1:

Code kopieren Der Code lautet wie folgt:

Funktion Universe() {

// Bestimmen Sie, ob eine Instanz vorhanden ist
If (typeof Universe.instance === 'object') {
         return Universe.instance;
}

// Andere Inhalte
This.start_time = 0;
This.bang = "Big";

// Cache
Universe.instance = this;

// Gibt dies implizit zurück
}

//Test
var uni = neues Universum();
var uni2 = neues Universum();
console.log(uni === uni2); // true

Methode 2:

Code kopieren Der Code lautet wie folgt:

Funktion Universe() {

// zwischengespeicherte Instanz
var-Instanz = this;

// Andere Inhalte
This.start_time = 0;
This.bang = "Big";

// Konstruktor überschreiben
Universum = Funktion () {
         Instanz zurückgeben;
};
}

//Test
var uni = neues Universum();
var uni2 = neues Universum();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123

Methode 3:

Code kopieren Der Code lautet wie folgt:

Funktion Universe() {

// Cache-Instanz
var-Instanz;

// Rekonstruktorfunktion
Universum = Funktion Universe() {
         Instanz zurückgeben;
};

// Nachbearbeitung der Prototypeneigenschaften
Universe.prototype = this;

// Beispiel
Instanz = neues Universum();

// Konstruktorzeiger zurücksetzen
Instance.constructor = Universe;

// Weitere Funktionen
Instance.start_time = 0;
Instance.bang = "Big";

Instanz zurückgeben;
}


// Test
var uni = neues Universum();
var uni2 = neues Universum();
console.log(uni === uni2); // true

//Prototypattribute hinzufügen
Universe.prototype.nothing = true;

var uni = new Universe();

Universe.prototype.everything = true;

var uni2 = new Universe();

console.log(uni.nothing); // true
console.log(uni2.nothing); // true
console.log(uni.everything); // true
console.log(uni2.everything); // true
console.log(uni.constructor === Universe); // true

Methode 4:

Code kopieren Der Code lautet wie folgt:

var Universum;

(Funktion () {

var-Instanz;

Universum = Funktion Universe() {

if (instance) {
             Instanz zurückgeben;
}

Instanz = this;

// Andere Inhalte
This.start_time = 0;
This.bang = "Big";
};
} ());

//Testcode
var a = neues Universum();
var b = neues Universum();
alarm(a === b); // true
a.bang = "123";
alarm(b.bang); // 123

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn