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:
Das obige ist der detaillierte Inhalt vonJavascript-Singleton-Muster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
