Heim > Artikel > Web-Frontend > js-Singleton-Modus zum Erstellen einer Popup-Fenster-Instanzfreigabe
1. Verstehen Sie das Singleton-Muster
Definition des Singleton-Musters: Stellen Sie sicher, dass eine Klasse nur eine Instanz hat und stellen Sie einen globalen Zugriffspunkt bereit, um darauf zuzugreifen
Singleton-Muster Der Kern : um sicherzustellen, dass es nur eine Instanz gibt und globalen Zugriff ermöglicht
2. Singleton-Modus in JavaScript
In js verwenden wir häufig globale Variablen als Singleton-Modus. Zum Beispiel:
var a={};
Warum a als globale Variable verwendet werden kann, weil es die folgenden zwei Bedingungen erfüllt:
1. Objekt a ist eindeutig
2. a ist im globalen Bereich definiert und bietet globalen Zugriff
Hinweis: Es wird jedoch empfohlen, Namespaces in js zu verwenden, um die Anzahl globaler Variablen zu reduzieren
3. Lazy Singleton
Lazy Singleton: Eine Objektinstanz, die bei Bedarf erstellt wird
Zweck: Auf der Seite befinden sich zwei Schaltflächen. Beim Klicken muss ein Antwort-Popup-Fenster angezeigt und das entsprechende CSS geladen werden Datei
Hinweis: Einige Entwickler sind es gewohnt, beim Laden in die Seite zu schreiben und dann den verborgenen Status festzulegen, wodurch DOM-Knoten verschwendet werden
Das Folgende ist der Implementierungscode:
1. Hauptseite
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单例模式</title> <style type="text/css"> body{ background: #fffff2; } h3{ text-align: center; } </style> </head> <body> <h3>创建唯一的窗口</h3> <button type="button" id="btn1">创建p1</button> <button type="button" id="btn2">创建p2</button> </body> <script type="text/javascript"> /** * 管理单例 */ var getSingle=function(fn){ var result; return function(){ return result || (result=fn.apply(this,arguments)); } }; // 弹框关闭打开 function LayerAction(){ this.layer=null;//弹窗element if(typeof this.setLayer !== "function"){ // 设置弹窗 LayerAction.prototype.setLayer=function(layer){ if(!layer){ console.error("参数不完整,必须传入layer"); return; }else{ this.layer=layer; } }; // 显示弹窗 LayerAction.prototype.showLayer=function(){ this.layer.style.display="block"; }; // 关闭弹窗 LayerAction.prototype.closeLayer= function(){ this.layer.style.display="none"; } ; } } /** * p1弹窗 */ var p1={ p1Layer:null, layerAction: new LayerAction(), // 创建p1弹窗 createp1Layer:function(){ var p=document.createElement("p"); p.innerHTML="我是p1"; p.style.display='none'; p.id="p1"; document.body.appendChild(p); var closeBtn=document.createElement("span"); closeBtn.innerText="关闭"; closeBtn.id="closep1"; p.appendChild(closeBtn); return p; }, // 引入p1弹窗样式列表 createp1Style: function() { var styleElement = document.createElement('link'); styleElement.type = 'text/css'; styleElement.href = 'p1.css'; styleElement.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(styleElement); console.log(document.getElementsByTagName('head')[0].innerHTML); return styleElement }, // 为关闭按钮绑定事件 bindActionForCloseLayer: function(){ var that=p1; document.getElementById("closep1").onclick=function(){ that.layerAction.closeLayer(); } }, // 调用弹窗1 startp1Layer: function(){ var createp1singleLayer=getSingle(this.createp1Layer); var createp1singleStyle=getSingle(this.createp1Style); var bindCloseEvent=getSingle(this.bindActionForCloseLayer); var that=this; document.getElementById("btn1").onclick=function(){ createp1singleStyle(); that.p1Layer=createp1singleLayer(); that.layerAction.setLayer(that.p1Layer); that.layerAction.showLayer(); bindCloseEvent(); } } }; p1.startp1Layer(); /** * p2弹窗 */ var p2={ p2Layer:null, layerAction: new LayerAction(), // 创建p2弹窗 createp2Layer: function(){ var p=document.createElement("p"); p.innerHTML="我是p2"; p.style.display='none'; p.id="p2"; document.body.appendChild(p); var closeBtn=document.createElement("span"); closeBtn.innerText="关闭"; closeBtn.id="closep2"; p.appendChild(closeBtn); return p; }, // 引入p2弹窗样式列表 createp2Style: function () { var styleElement = document.createElement('link'); styleElement.type = 'text/css'; styleElement.href = 'p2.css'; styleElement.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(styleElement); console.log(document.getElementsByTagName('head')[0].innerHTML); return styleElement }, // 为关闭按钮绑定事件 bindActionForCloseLayer: function(){ var that=p2; document.getElementById("closep2").onclick=function(){ that.layerAction.closeLayer(); } }, // 调用弹窗2 startp2Layer: function(){ var createp2singleLayer=getSingle(this.createp2Layer); var createp2singleStyle=getSingle(this.createp2Style); var bindCloseEvent=getSingle(this.bindActionForCloseLayer); var that=this; document.getElementById("btn2").onclick=function(){ createp2singleStyle(); that.p2Layer=createp2singleLayer(); that.layerAction.setLayer(that.p2Layer); that.layerAction.showLayer(); bindCloseEvent(); } } } p2.startp2Layer(); </script> </html>
2. p1.css
/** * Description: * Created by wxy on 2018/2/13 11:02 */ #p2{ width: 500px; height: 300px; background: #ffdd00; color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } #closep2{ cursor: pointer; margin-right: 5px; margin-top: 5px; float: right; border: 1px solid #fff; }
3. Verwandte Empfehlungen:
/** * Description: style of p1 * Created by wxy on 2018/2/13 11:01 */ #p1{ width: 500px; height: 300px; background: #0b0a0a; color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } #closep1{ cursor: pointer; margin-right: 5px; margin-top: 5px; float: right; border: 1px solid #fff; }Zwei Lösungen für js-Singleton-Modus_Javascript-Fähigkeiten
Zusammenfassung des NodeJS-Singleton-Modus, Adaptermodus, Dekorationsmodus und Beobachtermodus
Detailliertes Beispiel für ein JS-Singleton-Muster_Grundkenntnisse
Das obige ist der detaillierte Inhalt vonjs-Singleton-Modus zum Erstellen einer Popup-Fenster-Instanzfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!