So implementieren Sie ein Singleton-Muster mit ES6

Singleton ist eine sehr grundlegende Sache in der Programmierung. Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zur Verwendung von ES6 zur Implementierung des Singleton-Musters und seiner Anwendung vor. Freunde, die es benötigen, können darauf zurückgreifen Als Referenz lernen wir es mit dem untenstehenden Herausgeber.

Vorwort

In den Augen traditioneller Entwicklungsingenieure soll ein Singleton sicherstellen, dass eine Klasse nur eine Instanz hat Im Allgemeinen muss zunächst die Instanz ermittelt werden. Wenn sie vorhanden ist, wird sie direkt zurückgegeben. Wenn sie nicht vorhanden ist, wird sie erstellt und zurückgegeben. 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.

Die Definition des Singleton-Musters besteht darin, sicherzustellen, dass eine Klasse nur eine Instanz hat und einen globalen Zugriffspunkt für den Zugriff darauf bereitzustellen.

Das Singleton-Muster erstellt Objekte zur richtigen Zeit und erstellt das einzige.

Der Code ist lebensnah und sehr interessant. Wenn Sie sich beispielsweise auf einer Website anmelden, wird nach dem Klicken auf „Anmelden“ ein Anmelde-Popup-Fenster angezeigt. Auch wenn Sie erneut klicken, wird dasselbe Popup-Fenster nicht erneut angezeigt. Oder wenn der Benutzer in einem Musik-Player-Programm ein Musikstück öffnet und ein anderes Musikstück öffnen möchte, wird die vorherige Wiedergabeschnittstelle automatisch geschlossen und zur aktuellen Wiedergabeschnittstelle gewechselt. Dies sind alles Anwendungsszenarien des Singleton-Musters.

Um ein Singleton-Muster zu implementieren, besteht eine klassische Möglichkeit darin, eine Klasse zu erstellen. Es gibt eine weitere Methode in der Klasse, die ein Instanzobjekt der Klasse erstellen kann, und es gibt auch eine Markierung, um aufzuzeichnen, ob ein Instanzobjekt vorhanden ist wurde erstellt. Wenn das Objekt bereits vorhanden ist, wird ein Verweis auf das erste instanziierte Objekt zurückgegeben.

Implementierung des Singleton-Musters

es5-Implementierungsmethode

var Singleton = function(name) {
 this.name = name;
 //一个标记，用来判断是否已将创建了该类的实例
 this.instance = null;
}
// 提供了一个静态方法，用户可以直接在类上调用
Singleton.getInstance = function(name) {
 // 没有实例化的时候创建一个该类的实例
 if(!this.instance) {
  this.instance = new Singleton(name);
 }
 // 已经实例化了，返回第一次实例化对象的引用
 return this.instance;
}

Benutzer können durch a bekannt gemacht werden Schnittstelle für den Zugriff auf die Instanz.

Wir versuchen, das Objekt zweimal zu instanziieren und beobachten, ob die beiden Instanziierungsergebnisse auf dasselbe Objekt verweisen.

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);

Das Rückgabeergebnis ist: wahr. Erklären Sie, dass zwischen a und b eine Referenzbeziehung besteht.

es6-Implementierung

Singleton-Klasse erstellen. Das Klassenschlüsselwort und die statischen Funktionen sind beide neu in es6.

class Singleton {
 constructor(name) {
  this.name = name;
  this.instance = null;
 }
 // 构造一个广为人知的接口，供用户对该类进行实例化
 static getInstance(name) {
  if(!this.instance) {
   this.instance = new Singleton(name);
  }
  return this.instance;
 }
}

Anwendungsbeispiel des Singleton-Musters

Wir verwenden ein alltägliches Szenario im Leben, um die Anwendung des Singleton-Musters zu veranschaulichen.

Wenn Sie auf einer Website auf die Schaltfläche „Anmelden“ klicken, wird nur ein einziges Anmeldefeld angezeigt. Auch wenn Sie später auf die Schaltfläche „Anmelden“ klicken, werden keine weiteren Popup-Felder angezeigt. Dies ist eine typische Anwendung des Singleton-Musters. Als nächstes implementieren wir es. Um uns auf die Anzeige des Singleton-Modus zu konzentrieren, vereinfachen wir das Anmeldefeld.

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