Detaillierte Erläuterung der Schritte zur Implementierung des Singleton-Modus in JS

Dieses Mal werde ich Ihnen die Schritte zur Implementierung des Einzelfallmodus in JS ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung des Singleton-Modus in JS? ist ein praktischer Fall.

Traditionelles Singleton-Muster

Stellen Sie sicher, dass es nur eine Instanz einer Klasse gibt, und stellen Sie einen globalen Zugriffspunkt darauf bereit.

Implementieren Sie die Kernidee von Singleton

Es ist nichts weiter als die Verwendung einer Variablen, um zu markieren, ob ein Objekt für eine bestimmte Klasse erstellt wurde. Wenn dies der Fall ist, wird beim nächsten Abrufen der Instanz der Klasse direkt das zuvor erstellte Objekt zurückgegeben >JavaScript Um diese Idee energisch umzusetzen, sehen Sie sich bitte den Code an:

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 der Singleton-Klasse zu erhalten. Dies ist zwar kein Problem, aber js selbst hat kein Klassenkonzept, daher macht es für uns keinen Sinn, es mit traditionellem Singleton-Code zu implementieren Es stinkt und ist lang (eigentlich fühle ich mich beim Anblick unwohl). Im Folgenden

verwenden wir einen JavaScript--Abschluss, um einen Singleton zu implementieren. Bitte sehen Sie sich den Code an:

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 Abschlüsse verwendet, um einen Singleton zu implementieren, aber dieser Code ist immer noch stark gekoppelt. Der

-Konstruktor von Createp ist tatsächlich für zwei Dinge verantwortlich. Die erste besteht darin, das Objekt zu erstellen und die Initialisierungs-Init-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. Diese Art von Code kann besser entkoppelt werden. Bitte beachten Sie den folgenden Code:

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 noch für die Konstruktion von Objekten verantwortlich. Ob ein vorhandenes Objekt zurückgegeben oder ein neues Objekt erstellt und zurückgegeben werden soll, überlassen wir dieser Art von Code Schau dir an. (zhuang) gehorche (bi)!

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 Seitenanmeldefeld, kann es nur ein Anmeldefeld geben, und Sie können die Singleton-Idee zur Implementierung verwenden. Natürlich müssen Sie die Singleton-Idee nicht verwenden Dies führt möglicherweise dazu, 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 dass Sie versehentlich zwei Anmeldefelder anzeigen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man die Groß-/Kleinschreibung des ersten Buchstabens durchführt, wenn Jackson einen JSON-String analysiert

localstorage und Sessionstorage So verwenden Sie

in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des Singleton-Modus in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!