js-Designmuster: Was ist ein Singleton-Muster? Einführung in den js-Singleton-Modus

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Singleton-Muster? Die Einführung des js-Singleton-Modus hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist das Singleton-Muster?

Definition: Es gibt nur eine Instanz. 2. Kann global zugegriffen werden

Hauptlösung: Eine global verwendete Klasse wird häufig erstellt und zerstört.

Wann sollte der js-Singleton-Modus verwendet werden: Wenn Sie die Anzahl der Instanzen steuern und Systemressourcen sparen möchten.

So lösen Sie: Stellen Sie fest, ob das System diesen Singleton bereits hat. Wenn ja, geben Sie ihn zurück. Wenn nicht, erstellen Sie ihn.

Vorteile des js-Singleton-Modus: 1. Es gibt nur eine Instanz im Speicher, was den Speicheraufwand verringert, insbesondere wenn Instanzen häufig erstellt und zerstört werden (z. B. bei der Verwaltung des Homepage-Cache). ). 2. Vermeiden Sie die Mehrfachbelegung von Ressourcen (z. B. Dateischreibvorgänge).

Nachteile des Singleton-Modus: Keine Schnittstelle, keine Vererbung, Konflikte mit dem Prinzip der Einzelverantwortung. Eine Klasse sollte sich nur um die interne Logik kümmern, nicht darum, wie sie außerhalb instanziiert wird.

Js-Singleton-Modus-Nutzungsszenarien: 1. Globaler Cache. 2. Popup-Fenster

Js-Singleton-Modus implementieren:

const singleton = function(name) {
    this.name = name
    this.instance = null
}

singleton.prototype.getName = function() {
    console.log(this.name)
}

singleton.getInstance = function(name) {
    if (!this.instance) { // 关键语句
        this.instance = new singleton(name)
    }
    return this.instance
}

// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
console.log(a === b)

Singleton-Modus in JavaScript

Da JavaScript eine klassenlose Sprache ist und in JS globale Objekte aufeinander treffen zwei Bedingungen des Singleton-Musters. Oftmals behandeln wir das globale Objekt als Singleton-Modus und verwenden

var obj = {}

Praxis der Popup-Ebene

Eine Möglichkeit, das Popup zu implementieren, besteht darin, zuerst das Popup zu erstellen und es dann wie folgt auszublenden Wenn es sich um ein untergeordnetes Element handelt, wird unnötiger DOM-Overhead verschwendet. Wir können es erstellen, wenn wir das Popup-Fenster benötigen, und es mit dem Singleton-Modus kombinieren, um nur eine Instanz zu erreichen, wodurch etwas DOM-Overhead eingespart wird. Das Folgende ist Teil des Codes für das Anmeldefeld:

//弹框层的实践
const createLoginLayer = function() {
    const myDiv = document.createElement('div')
    myDiv.innerHTML = '登入浮框'
    // myDiv.style.display = 'none'
    document.body.appendChild(myDiv);
    return myDiv
}

//使单例模式和创建弹框代码解耦
const getSingle = function(fn) {
  let result = null;
  return function() {
      if(!result){
          result = fn.apply(this, arguments);
      }
    return result;
  }
}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    createSingleLoginLayer()
}

Verwandte Empfehlungen:

Detaillierte Erläuterung des Konstruktormusters des JS-Entwurfsmusters

PHP-Designmuster, Designmuster

PHP-Designmuster Singleton-Modus-Code, PHP-Designmuster

Das obige ist der detaillierte Inhalt vonjs-Designmuster: Was ist ein Singleton-Muster? Einführung in den js-Singleton-Modus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!