单例应用：实现登入弹窗功能
弹窗功能简述：
弹窗功能体现：
不使用跳转路由，直接盖在页面上
弹窗实现
直接插入一个弹窗，通过display none\block来控制是否让用户看到
<div class="box" style="display: none;"></div>
如果不管用户是否登入，都必须在DOM树加载一个登入弹窗，根据用户是否登入改变style的display的属性，将会会耗费大量内存，耗性能，而且据统计大约有有90%的用户不登入
为了优化性能，我们将此弹窗推迟到第一次用的时候，使用单例去实现
单例实现弹窗
使用DOM操作，推迟到登入的时刻，使用单例，支持复用
下面的例子通过一个盒子来简单模拟弹窗的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal 登入弹窗单例</title>
<style>
#modal{
width: 200px;
height: 200px;
line-height: 200px;
/* 居中 */
position: fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
border: 1px solid #000;
text-align: center;
}
</style>
</head>
<body>
<!-- <div class="box" style="display: none;"></div> -->
<button id="open">打开弹窗</button>
<button id="open2">打开天窗</button>
<button id="close">关闭弹窗</button>
<script>
//DOM
//推迟到登入的时刻
//单例
const Modal = (function(){
let modal=null//自由变量
return function(){
if(!modal){//第一次和唯一一次
modal=document.createElement('div');//创建一个动态的节点
modal.innerHTML='我是一个全局唯一的Modal';//设置节点的内容
modal.id='modal';//设置节点的id
modal.style.display='none';//点击了才会显现出来
document.body.appendChild(modal);//将节点添加到body中,挂在到页面上
}
return modal;
}
})()//理解执行函数是创建闭包最便携的方式，闭包的作用域
//new Modal();//new的是return出来的函数，函数执行返回的是instanc
document.getElementById('open').addEventListener('click', function() {
const modal = new Modal();
modal.style.display = 'block';
})
document.getElementById('open2').addEventListener('click', function() {
const modal = new Modal();
modal.style.display = 'block';
})
document.getElementById('close').addEventListener('click', function() {
const modal = new Modal();
modal.style.display = 'none';//闭包的本质：提供了一种能够在外界访问变量的方式
})
</script>
</body>
</html>
通过闭包实现单例模式，当你使用 new Modal() 时，实际上是调用了上面返回的匿名函数，通过立即执行函数来创建闭包，将实例化的对象一直放在闭包中，每次new Modal()时，如果实例化的对象存在，就直接返回该实例化对象，否则创建实例化对象
如此方可确保弹窗只创建一次，而且只有在用户按了登入按钮之后再new，产生的实例还可以在之后用户有关的弹窗操作中复用，避免没有必要的DOM树的加载和资源浪费
