Javascript-Singleton-Muster

Dieses Mal stelle ich Ihnen den Einzelfallmodus von Javascript und die Vorsichtsmaßnahmen des Javascript-Singleton-Modus vor. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Das Singleton-Muster ist ein Objekt, das verwendet wird, um einen Namespace zu unterteilen und einen Stapel von Eigenschaften und Methoden zusammenzufassen. Wenn es instanziiert werden kann, dann kann es nur sein einmal instanziiert.

Teilen Sie den Namespace und reduzieren Sie globale Variablen

Organisieren Sie den Code in einem, um das Lesen und die Wartung zu erleichtern

Nicht alle Objektliterale sind Singletons, wie z. B. simulierte Daten

Grundstruktur:

let Cat = {   name: 'Kitty',   age: 3,   run: ()=>{      console.log('run');
   }
}

Die obige Objektliteralstruktur ist eine der Möglichkeiten, einen Singleton-Modus zu erstellen, aber es ist kein Singleton-Modus wird nur einmal instanziiert
Um den Singleton-Modus zu implementieren, können Sie eine Variable verwenden, um anzugeben, ob die Klasse instanziiert ist

Grundlegende Implementierung:

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

Verwenden Sie die Instanzvariable, um anzugeben, ob die Klasse instanziiert ist Instanz Singleton. Wenn keine Instanz vorhanden ist, wird die Instanz direkt zurückgegeben. Da sie nur einmal instanziiert werden kann, ist die von cat2 erhaltene Instanz dieselbe wie cat1

Praktisch
Um eine wiederholte Erstellung beim Erstellen von DOM-Elementen zu vermeiden, können Sie den Singleton-Modus „Erstellen“ verwenden.

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = 'block';
};

Ich glaube, Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen erhalten Sie Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Javascript’s Observer Pattern

Javascript’s Strategy Pattern

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