So implementieren Sie ein Singleton-Muster in JavaScript

Dieser Artikel stellt hauptsächlich Beispiele für die JavaScript-Implementierung des Singleton-Modus und Code-Erklärungen vor. Leser können ihm als Referenz folgen.

Traditionelles Singleton-Muster

Stellt sicher, dass eine Klasse nur eine Instanz hat und stellt einen globalen Zugriffspunkt für den Zugriff darauf bereit.

Die Umsetzung der Kernidee eines Singletons

ist nichts anderes als die Verwendung einer Variablen, um zu markieren, ob ein Objekt für eine bestimmte Klasse erstellt wurde. Wenn ja, wird es direkt zurückgegeben Wenn das nächste Mal eine Instanz der Klasse abgerufen wird, verwenden wir JavaScript, um diese Idee umzusetzen:

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){　　 alert ( this.name );
};
Singleton.getInstance = (function(){ 　　var instance = null;
　　return function( name ){
　　　　　　　　　　if ( !instance ){
　　　　　　　　　　　　instance = new Singleton( name );
　　　　　　　　　　}
　　　　　　　　return instance;　　　　　　 }
})();

Wir verwenden Singleton.getInstance, um das einzige Objekt des Singleton abzurufen Das ist in der Tat kein Problem, aber js selbst hat kein Klassenkonzept, daher macht es für uns keinen Sinn, es mit traditionellem Singleton-Denken zu implementieren (eigentlich fühle ich mich beim Betrachten unwohl). Unten verwenden wir JavaScript-Verschlüsse, um einen Singleton zu implementieren:

var Createp = (function(){ 　　　　　　var instance;
　　　　　　var Createp = function( html ){ 　　　　　　　　　　if ( instance ){
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
Createp.prototype.init = function(){
var p = document.createElement( 'p' );
p.innerHTML = this.html; 
document.body.appendChild( p );
　　　　　　};
　　　　　　return Createp; })();
var a = new Createp( 'sven1' ); var b = new Createp( 'sven2' );
alert ( a === b ); // true

Wie Sie sehen können, haben wir tatsächlich Verschlüsse verwendet, um einen Singleton zu implementieren, aber dieser Code ist immer noch stark gekoppelt eigentlich für zwei Dinge verantwortlich. Die erste besteht darin, das Objekt zu erstellen und die Initialisierungsinit-Methode auszuführen, und die zweite besteht darin, sicherzustellen, dass nur ein Objekt vorhanden ist. Dieser Code hat unklare Verantwortlichkeiten. Jetzt müssen wir diese beiden Aufgaben trennen. Der Konstruktor ist für die Konstruktion des Objekts verantwortlich. Die Entscheidung, ob ein vorhandenes Objekt zurückgegeben oder ein neues Objekt erstellt werden soll, überlassen wir der Ausführung Tatsächlich geht es darum, eine Programmieridee zu erfüllen: das Prinzip der Einzelverantwortung. Ein solcher Code kann besser entkoppelt werden. Bitte schauen Sie sich den folgenden Code an:

var Createp = function (html) {
    this.html = html;
    this.init();
  };
  Createp.prototype.init = function () {
    var p = document.createElement('p');
    p.innerHTML = this.html;
    document.body.appendChild(p);
  };
  var ProxySingletonCreatep = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new Createp(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreatep('sven1');
  var b = new ProxySingletonCreatep('sven2');
  alert(a === b); //true

Wie Sie sehen, ist unser Konstruktor Createp jetzt nur dafür verantwortlich, vorhandene Objekte zurückzugeben oder neue Objekte zu erstellen und zurückzugeben , überlassen wir diese Angelegenheit der Proxy-Klasse ProxySingletonCreatep. Diese Art von Code sieht komfortabel (zhuang) und überzeugend (bi) aus!

Veröffentlichen Sie abschließend einen hochabstrakten Singleton-Mustercode, die Essenz von Lazy Singleton!

//单例模式抽象，分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

Der formale Parameter fn ist unser Konstruktor. Wir müssen nur jeden Konstruktor übergeben, den wir benötigen, um einen neuen Lazy Singleton zu generieren. Wenn Sie beispielsweise den Konstruktor zum Erstellen einer Freundin übergeben und getSingle() aufrufen, können Sie eine neue Freundin generieren. Wenn Sie in Zukunft getSingle() aufrufen, wird nur die gerade erstellte Freundin zurückgegeben. Was eine neue Freundin betrifft – sie existiert nicht.

Häufige Szenarien für Singletons

Wenn Sie nur ein eindeutiges Objekt generieren müssen, z. B. ein Seiten-Anmeldefeld, kann es nur ein Anmeldefeld geben, dann können Sie die Idee von verwenden ​​ein Singleton, um es zu implementieren, Sie müssen es natürlich nicht mit der Singleton-Idee implementieren. Das Ergebnis kann sein, dass Sie jedes Mal, wenn Sie das Anmeldefeld anzeigen möchten, ein Anmeldefeld neu generieren und anzeigen müssen (was die Leistung beeinträchtigt). ), oder es kann sein, dass Sie versehentlich zwei Anmeldefelder anzeigen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Datei-Upload in nodejs+express

So implementieren Sie eine Blog-Management-Plattform in Vue+SpringBoot

So beheben Sie den in nodejs überschrittenen maximalen Aufrufstapelfehler

Es gibt Beispiele für asynchrone Komponenten in Vue

So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

So implementieren Sie Animationseffekte und Rückruffunktionen

Verwenden Sie jQuery Operationen So implementieren Sie die Zellzusammenführung in einer Tabelle

So implementieren Sie die Übergabe von Routenparametern im Vue-Router

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Singleton-Muster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!