Heim > Artikel > Web-Frontend > 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.
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
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)
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 = {}
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!