Beispiel für die Implementierung des Singleton-Patterns in JavaScript

Traditionelles Singleton-Muster

Stellen Sie sicher, dass eine Klasse nur eine Instanz hat und bieten Sie einen globalen Zugriffspunkt darauf.

Kernidee der Singleton-Implementierung

Es geht darum, mit einer Variable zu kennzeichnen, ob bereits ein Objekt für eine bestimmte Klasse erstellt wurde. Wenn ja, wird beim nächsten Abrufen der Instanz der Klasse direkt das zuvor erstellte Objekt zurückgegeben. Nachfolgend verwenden wir JavaScript, um diese Idee zu erzwingen, siehe Code:

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 erhalten durch Singleton.getInstance das einzigartige Objekt der Singleton-Klasse, das ist sicherlich in Ordnung, aber JavaScript hat selbst das Konzept der Klasse nicht, daher hat es keinen Sinn, die traditionelle Singleton-Idee zu erzwingen, solcher Code ist schlecht und lang (eigentlich sehe ich das selbst nicht gerne, hahaha). Nächste verwenden wir das Closure von JavaScript, um einen Singleton zu realisieren, siehe Code:

var CreateDiv = (function() { 　　　　　　var instance;
　　　　　　var CreateDiv = function(html) { 　　　　　　　　　　if (instance) {
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function() {
var div = document.createElement('div');
div.innerHTML = this.html; 
document.body.appendChild(div);
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv('sven');1); var b = new CreateDiv('sven');2);
alert(a === b); // true

Man kann sehen, dass wir hier tatsächlich durch Kapselung einen Singleton implementiert haben, aber dieser Code ist noch stark gekoppelt. Der Konstruktor von CreateDiv ist in der Tat für zwei Aufgaben verantwortlich. Zum einen ist das das Erstellen von Objekten und das Ausführen der Initialisierungs-Methode init, und zum anderen ist es das Gewährleisten, dass nur ein Objekt existiert. Solcher Code ist nicht klar in der Verantwortung, und wir müssen diese beiden Aufgaben trennen. Der Konstruktor ist verantwortlich für die Konstruktion des Objekts, und die Entscheidung, ob ein bestehendes Objekt zurückgegeben oder ein neues Objekt erstellt und zurückgegeben wird, wird einer anderen Funktion überlassen, was in der Tat auch dem Programmiergedanken der Einzigen Verantwortung entspricht. Solcher Code kann besser entkoppelt werden. Sehen Sie sich den folgenden Code an:

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      };
      return instance;
    };
  );
  var a = new ProxySingletonCreateDiv('sven');1);
  var b = new ProxySingletonCreateDiv('sven');2);
  alert(a === b); //true

Man kann sehen, dass unser Konstruktor CreateDiv derzeit nur für die Konstruktion von Objekten verantwortlich ist. Ob es sich um die Rückgabe eines vorhandenen Objekts oder die Konstruktion eines neuen Objekts und die Rückgabe handelt, das haben wir der Proxy-Klasse proxySingletonCreateDiv überlassen, so dass der Code besser aussieht!

Am Ende ein hochgradig abstraktes Singleton-Pattern-Code, das Wesen der lazy Singleton!

//Abstraktion des Singleton-Patterns, Trennung der Funktion zur Erstellung des Objekts und der Überprüfung, ob das Objekt bereits erstellt wurde
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    };
  };

Der Parameter fn ist unser Konstruktionsfunktion, und wir können eine neue lazige Singleton erzeugen, indem wir jede eigene benötigte Konstruktionsfunktion einfügen. Zum Beispiel können Sie eine Konstruktionsfunktion für die Erstellung einer Freundin einfügen und getSingle() aufrufen, um eine neue Freundin zu erzeugen. Wenn getSingle() später erneut aufgerufen wird, wird immer die zuvor erstellte Freundin zurückgegeben. Eine neue Freundin existiert nicht.

Häufige Anwendungsfälle des Singleton

Manchmal müssen Sie nur ein einziges Objekt erzeugen, zum Beispiel einen Login-Dialog im Browser, der nur einmal vorhanden sein kann. In diesem Fall können Sie das Singleton-Denken verwenden, um ihn zu realisieren. Natürlich können Sie dies auch ohne Singleton-Denken tun, was jedoch möglicherweise dazu führt, dass Sie bei jedem Anzeigen des Login-Dialogs einen neuen erzeugen und anzeigen müssen (Leistungsaufwand), oder Sie könnten versehentlich zwei Login-Dialoge anzeigen.

Dies sind unsere Erfahrungen und Lerninhalte zur Implementierung des Singleton-Patterns in JS, die wir mit Ihnen teilen. Vielen Dank für Ihre Unterstützung der Anläuten-Tutorials.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und ist urheberrechtlich geschützt. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich geschützte Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald überprüft, wird die Website den fraglichen urheberrechtlichen Inhalt sofort löschen.)