当你向面试官朗诵单例模式时 ，ta说talk is cheep ， show me the code🤡

我写过一篇关于单例模式的文章 ，欢迎点赞 ~

juejin.cn/post/748170...

如果在激情朗诵完 【单例模式】的八股文后 ， 面试官看你朗诵的挺有感情的 ，想进一步考察你 ， 于是战术性后仰 ， 嘴角微微扬起 ， 抛出一个手写题 ------ 实现一个全局的模态框 （ Modal弹框 ）

---

（空气突然安静.jpg）

---

你战战兢兢打开 vscode , 大脑一篇空白 ， 因为你都不知道什么是 【全局的模态框 】？

还好 ， 你曾经问过 deepseek 🤪

他是这样回答的 ：

哦 ，死去的记忆此时像潮水一样滚来 ~

当时就怪 deepseek 突然崩了 ， 你没有看到怎么实现的 ， 现在只能硬着头皮上了😭😭😭

我们首先有下面的按钮 ，简单的用 html 和 css 搓个页面

<!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 函数

  // 核心逻辑，这里采用了闭包思路来实现单例模式
    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
    	}
    })()

1. 点击打开按钮展示模态框

• 监听按钮事件 ，一旦触发 ， 实例化一个 Modal , 之后利用 display : block 来显示模态框

    // 点击打开按钮展示模态框
    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

  // 点击关闭按钮隐藏模态框
    document.getElementById('close').addEventListener('click', function() {
    	const modal = new Modal()
    	if(modal) {
    	    modal.style.display = 'none'
    	}
    })

完整代码如下：

<!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🤡