您的当前位置：首页 js单例模式之创建弹窗实例分享

js单例模式之创建弹窗实例分享

来源：刀刀网

一、了解单例模式

单例模式的定义：保证一个类仅有一个实例，并提供一个访问他的全局访问点

单例模式的核心：是确保只有一个实例，并提供全局访问

二、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">创建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.css

/**
 * 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;
}