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

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

juejin.cn/post/748170...

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

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

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