js单例模式——创建弹窗
程序员文章站
2022-05-18 14:16:10
...
一、了解单例模式
单例模式的定义：保证一个类仅有一个实例，并提供一个访问他的全局访问点
单例模式的核心：是确保只有一个实例，并提供全局访问
二、javascript中的单例模式
在js中，我们经常会把全局变量当做单例模式来使用，例如：
var a={};
为什么a可以当做全局变量来使用呢，因为其满足以下两个条件：
1、对象a独一无二
2、a定义在全局作用域下，提供了全局访问
注：但是在js中建议使用命名空间，来减少全局变量的数量
三、惰性单例
惰性单例：在需要的时候才创建的对象实例
用途：在页面中有两个按钮，点击的时候需要显示响应弹窗并加载相应的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">创建div1</button>
<button type="button" id="btn2">创建div2</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";
} ;
}
}
/**
* div1弹窗
*/
var div1={
div1Layer:null,
layerAction: new LayerAction(),
// 创建div1弹窗
createDiv1Layer:function(){
var div=document.createElement("div");
div.innerHTML="我是div1";
div.style.display='none';
div.id="div1";
document.body.appendChild(div);
var closeBtn=document.createElement("span");
closeBtn.innerText="关闭";
closeBtn.id="closeDiv1";
div.appendChild(closeBtn);
return div;
},
// 引入div1弹窗样式列表
createDiv1Style: function() {
var styleElement = document.createElement('link');
styleElement.type = 'text/css';
styleElement.href = 'div1.css';
styleElement.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(styleElement);
console.log(document.getElementsByTagName('head')[0].innerHTML);
return styleElement
},
// 为关闭按钮绑定事件
bindActionForCloseLayer: function(){
var that=div1;
document.getElementById("closeDiv1").onclick=function(){
that.layerAction.closeLayer();
}
},
// 调用弹窗1
startDiv1Layer: function(){
var createDiv1singleLayer=getSingle(this.createDiv1Layer);
var createDiv1singleStyle=getSingle(this.createDiv1Style);
var bindCloseEvent=getSingle(this.bindActionForCloseLayer);
var that=this;
document.getElementById("btn1").onclick=function(){
createDiv1singleStyle();
that.div1Layer=createDiv1singleLayer();
that.layerAction.setLayer(that.div1Layer);
that.layerAction.showLayer();
bindCloseEvent();
}
}
};
div1.startDiv1Layer();
/**
* div2弹窗
*/
var div2={
div2Layer:null,
layerAction: new LayerAction(),
// 创建div2弹窗
createDiv2Layer: function(){
var div=document.createElement("div");
div.innerHTML="我是div2";
div.style.display='none';
div.id="div2";
document.body.appendChild(div);
var closeBtn=document.createElement("span");
closeBtn.innerText="关闭";
closeBtn.id="closeDiv2";
div.appendChild(closeBtn);
return div;
},
// 引入div2弹窗样式列表
createDiv2Style: function () {
var styleElement = document.createElement('link');
styleElement.type = 'text/css';
styleElement.href = 'div2.css';
styleElement.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(styleElement);
console.log(document.getElementsByTagName('head')[0].innerHTML);
return styleElement
},
// 为关闭按钮绑定事件
bindActionForCloseLayer: function(){
var that=div2;
document.getElementById("closeDiv2").onclick=function(){
that.layerAction.closeLayer();
}
},
// 调用弹窗2
startDiv2Layer: function(){
var createDiv2singleLayer=getSingle(this.createDiv2Layer);
var createDiv2singleStyle=getSingle(this.createDiv2Style);
var bindCloseEvent=getSingle(this.bindActionForCloseLayer);
var that=this;
document.getElementById("btn2").onclick=function(){
createDiv2singleStyle();
that.div2Layer=createDiv2singleLayer();
that.layerAction.setLayer(that.div2Layer);
that.layerAction.showLayer();
bindCloseEvent();
}
}
}
div2.startDiv2Layer();
</script>
</html>
2、div1.css
/**
* Description:
* Created by wxy on 2018/2/13 11:02
*/
#div2{
width: 500px;
height: 300px;
background: #ffdd00;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#closeDiv2{
cursor: pointer;
margin-right: 5px;
margin-top: 5px;
float: right;
border: 1px solid #fff;
}/**
* Description: style of div1
* Created by wxy on 2018/2/13 11:01
*/
#div1{
width: 500px;
height: 300px;
background: #0b0a0a;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#closeDiv1{
cursor: pointer;
margin-right: 5px;
margin-top: 5px;
float: right;
border: 1px solid #fff;
}上一篇： 水滴特效（HTML + CSS）