팝업 창 인스턴스 공유를 생성하는 Node.js 싱글턴 모드
- 小云云원래의
- 2018-03-07 11:20:101813검색
1. 싱글턴 패턴 이해
싱글턴 패턴의 정의: 클래스에 인스턴스가 하나만 있는지 확인하고 이에 액세스할 수 있는 전역 액세스 지점을 제공합니다.
싱글턴 패턴의 핵심: 인스턴스가 하나만 있는지 확인하고 제공합니다. 전역 액세스 방문
2. JavaScript의 싱글톤 모드
js에서는 종종 전역 변수를 싱글톤 모드로 사용합니다. 예:
var a={};
a를 전역 변수로 사용할 수 있는 이유 음, 왜냐하면 다음 두 가지 조건을 충족합니다.
1. 개체 a는 고유합니다.
2. A는 전역 범위에 정의되어 전역 액세스를 제공합니다.
참고: 그러나 전역 변수를 줄이기 위해 js에서는 네임스페이스를 사용하는 것이 좋습니다. of
3. Lazy Singleton
Lazy Singleton: 필요할 때만 생성되는 객체 인스턴스
목적: 페이지에 두 개의 버튼이 있습니다. 클릭하면 응답 팝업 창이 표시되고 해당 CSS가 로드됩니다. .파일
참고: 일부 개발자는 페이지가 로드될 때 페이지에 작성한 다음 DOM 노드를 낭비하는 숨겨진 상태를 설정하는 데 익숙합니다.
다음은 구현 코드입니다.
1, 메인 페이지
<!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, p2.CSSSSSSSSSSSSSSSSSSSSSSSSS SINGLETON MODE_JAVASCRIPT SKINGS SINDLETON 모드, 어댑터 모드, 장식 모드, 관찰 모드 요약 에 대한 솔루션. js 싱글톤 패턴 상세예_기본지식
위 내용은 팝업 창 인스턴스 공유를 생성하는 Node.js 싱글턴 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.