单例设计模式小demo
作者：互联网
回顾了一下单例设计模式，所谓单例设计模式，就是一个类只有一个实例，这句话在小红书上也接触到过，刚开始没有理解，而且这句话的潜在意识是一个类也可能会有多个实例，例如通过new关键字创建的实例，每一个实例都是不一样的，每一个实例都是指向不同的引用，而单例，就是一个类只能放回一个对象，无论调用多少次，如果存在已创建的实例，则返回的是undefine；废话不多说，上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{
width:200px;
height: 50px;
background:blue;
}
#box1>span{
width:20px;
height: 10px;
background:red;
margin-top: 40px;
}
#box1>#ok{
margin-right:10px;
}
#box1>#cancel{
margin-left:10px;
}
</style>
</head>
<body>
<script>
//点击展示一个界面 用单例来实现 使用场景 相同的实例只展示一次 例如页面的登录框
window.onload=function(){
var btn = document.querySelector('#box');
//console.log(btn);
btn.onclick = function(){
singleton();
}
//用立即执行函数封装一个singleton方法
var singleton = (
function(){
//初始化一个变量
var psy = null;
//立即执行函数（闭包）返回一个函数
return function(){
if(!psy){
//如果psy不为空这创建一个弹出框
psy = document.createElement('div');
psy.id = 'box1';
psy.innerHTML ='你确定要删除吗';
var okEle = document.createElement('span');
okEle.id='ok';
okEle.innerHTML = '确定';
okEle.onclick =function () {
psy.remove();
//此时要将psy重新赋值为空 psy虽然再页面中被删除 但是dom元素依然存在与内存中
psy = null;
}
var cancelEle = document.createElement('span');
cancelEle.id='cancel';
cancelEle.innerHTML = '取消';
cancelEle.onclick =function () {
psy.remove();
//此时要将psy重新赋值为空 psy虽然再页面中被删除 但是dom元素依然存在与内存中
psy = null;
}
psy.appendChild(okEle);
psy.appendChild(cancelEle);
document.body.appendChild(psy);
}
}
}
)()
}
</script>
<button id = 'box'>点击显示</button>
</body>
</html>
理解单例一定要在使用场景去理解，最普遍的使用场景就是，页面的弹出框，当用户多次点击一个按钮，警告框指挥弹出一个。不足之处，敬请校验。
标签：function,okEle,实例,demo,psy,单例,var,设计模式 来源： https://blog.csdn.net/weixin_43414945/article/details/102753153