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>Nach dem Login kopieren
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;
}Nach dem Login kopieren
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;
}Nach dem Login kopieren
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!
