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">创建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;//弹窗elementif(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").οnclick=function(){that.layerAction.closeLayer();}},// 调用弹窗1startDiv1Layer: function(){var createDiv1singleLayer=getSingle(this.createDiv1Layer);var createDiv1singleStyle=getSingle(this.createDiv1Style);var bindCloseEvent=getSingle(this.bindActionForCloseLayer);var that=this;document.getElementById("btn1").οnclick=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").οnclick=function(){that.layerAction.closeLayer();}},// 调用弹窗2startDiv2Layer: function(){var createDiv2singleLayer=getSingle(this.createDiv2Layer);var createDiv2singleStyle=getSingle(this.createDiv2Style);var bindCloseEvent=getSingle(this.bindActionForCloseLayer);var that=this;document.getElementById("btn2").οnclick=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;
}

3、div2.css

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

js单例模式——创建弹窗相关推荐

js单例模式及应用场景
单例模式单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个命名空间 ...
android注册弹窗,Android开发之PopupWindow创建弹窗、对话框的方法详解
本文实例讲述了Android开发之PopupWindow创建弹窗.对话框的方法.分享给大家供大家参考,具体如下: 简介: PopupWindow 可创建类似对话框风格的窗口效果: 使用方法: 使用P ...
[译] 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP（第二部分）
原文地址:Create your first Ethereum dAPP with Web3 and Vue.JS (Part 2) 原文作者:Alt Street 译文出自:掘金翻译计划本文永久链 ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
ENSP如何开启服务器的http_如何使用HTTP模块在Node.js中创建Web服务器（上）
当你在浏览器中查看网页时,其实是在向互联网上的另一台计算机发出请求,然后它会将网页提供给你作为响应.你通过互联网与之交谈的那台计算机就是Web服务器,Web服务器从客户端(例如你的浏览器)接收HTTP ...
js中创建form表单
有的时候需要在js中创建form向controller提交数据,下面是在工作中遇到的一些问题和解决办法: 简单的用jquery创建form: var form = $("<form m ...
draft.js_如何使用快捷方式在Draft.js中创建有序列表和无序列表
draft.js by Andrey Semin 通过安德烈·塞米(Andrey Semin) 如何使用快捷方式在Draft.js中创建有序列表和无序列表 (How to create ordered ...
html div 移除,js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementById ...

js单例模式——创建弹窗

js单例模式——创建弹窗相关推荐

最新文章

热门文章