我写过一篇关于单例模式的文章 ，欢迎点赞 ~
如果在激情朗诵完 【单例模式】的八股文后 ， 面试官看你朗诵的挺有感情的 ，想进一步考察你 ， 于是战术性后仰 ， 嘴角微微扬起 ， 抛出一个手写题 ------ 实现一个全局的模态框 （ Modal弹框 ）
（空气突然安静.jpg）
你战战兢兢打开 vscode , 大脑一篇空白 ， 因为你都不知道什么是 【全局的模态框 】？
还好 ， 你曾经问过 deepseek 🤪
他是这样回答的 ：
哦 ，死去的记忆此时像潮水一样滚来 ~
当时就怪 deepseek 突然崩了 ， 你没有看到怎么实现的 ， 现在只能硬着头皮上了😭😭😭
我们首先有下面的按钮 ，简单的用 html 和 css 搓个页面
htmL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单例模式弹框</title>
</head>
<style>
#modal {
height: 200px;
width: 200px;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
text-align: center;
}
#open, #close {
margin-top: 20px;
display: block;
margin: 0 auto;
width: 100px;
height: 30px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
<body>
<button id='open'>打开弹框</button>
<button id='close'>关闭弹框</button>
</body>
<script>
</script>
</html>我们现在 ，要开始动手写标签中的内容了 ？
首先思考一下 ， 我刚刚朗诵完单例模式的八股文 ， 这道题目和单例模式有什么关系
(思考中。。。.jpg)
要是可以抽空问下豆包就好了😭
没办法 ， 硬着头皮上了 ~
使用闭包和立即执行函数一起写一个 Modal 函数
js
// 核心逻辑，这里采用了闭包思路来实现单例模式
const Modal = (function() {
let modal = null
return function() {
if(!modal) {
modal = document.createElement('div')
modal.innerHTML = '我是一个全局唯一的Modal'
modal.id = 'modal'
modal.style.display = 'none'
document.body.appendChild(modal)
}
return modal
}
})()- 点击打开按钮展示模态框
- 监听按钮事件 ，一旦触发 ， 实例化一个 Modal , 之后利用 display : block 来显示模态框
js
// 点击打开按钮展示模态框
document.getElementById('open').addEventListener('click', function() {
// 未点击则不创建modal实例，避免不必要的内存占用;此处不用 new Modal 的形式调用是因为 Modal 是一个函数，不是一个类
const modal = new Modal()
modal.style.display = 'block'
})
2.点击关闭按钮隐藏模态框
- 若是 之前创建了一个 Modal 实例 ， 我们在此触发按钮事件的时候 ， 由于 Modal 内部自带检验函数 ， 所以此时 modal 并没有创建实例 ，还是原来的实例 ，这个时候 display ：none 影藏模态框
- 若是最开始就点击隐藏模态框 ， 会创建一个 modal 实例 ， 同样是display ：none ，即 modal 始终为真 ， 始终是display ：none
js
// 点击关闭按钮隐藏模态框
document.getElementById('close').addEventListener('click', function() {
const modal = new Modal()
if(modal) {
modal.style.display = 'none'
}
})完整代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单例模式弹框</title>
</head>
<style>
#modal {
height: 200px;
width: 200px;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
text-align: center;
}
#open, #close {
margin-top: 20px;
display: block;
margin: 0 auto;
width: 100px;
height: 30px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
<body>
<button id='open'>打开弹框</button>
<button id='close'>关闭弹框</button>
</body>
<script>
// 核心逻辑，这里采用了闭包思路来实现单例模式
const Modal = (function() {
let modal = null
return function() {
if(!modal) {
modal = document.createElement('div')
modal.innerHTML = '我是一个全局唯一的Modal'
modal.id = 'modal'
modal.style.display = 'none'
document.body.appendChild(modal)
}
return modal
}
})()
// 点击打开按钮展示模态框
document.getElementById('open').addEventListener('click', function() {
// 未点击则不创建modal实例，避免不必要的内存占用;此处不用 new Modal 的形式调用是因为 Modal 是一个函数，不是一个类
const modal = new Modal()
modal.style.display = 'block'
})
// 点击关闭按钮隐藏模态框
document.getElementById('close').addEventListener('click', function() {
const modal = new Modal()
if(modal) {
modal.style.display = 'none'
}
})
</script>
</html>效果如下：
talk is cheep ， show me the code🤡