JavaScript利用单例设计模式实现一个简单的模态框

最新推荐文章于 2022-02-25 21:55:33 发布

挽枫blog

最新推荐文章于 2022-02-25 21:55:33 发布

阅读量283

点赞数

分类专栏： javascript学习心得文章标签：设计模式 javascript

本文链接：https://blog.csdn.net/qq_19313497/article/details/104336184

版权

javascript学习心得专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先介绍一下单例模式

什么是单例模式？

保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。

为什么需要单例模式？

一句话，优化代码。

什么时候需要单例模式？

1、有频繁实例化然后销毁的情况，也就是频繁的 new 对象，可以考虑单例模式；
2、创建对象时耗时过多或者耗资源过多，但又经常用到的对象；
3、频繁访问 IO 资源的对象，例如数据库连接池或访问本地文件；

实例

本实例以实现一个简单的模态框作为单例模式的介绍

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式的应用实现简单的模态框</title>
</head>

<body>
    <button id="open">打开</button>
    <button id="close">关闭</button>
</body>
<script>

    const Modal = (function () {
        let modal = null;
        return function () {
            if (!modal) {
                console.log(!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 () {
        const modal = new Modal();
        modal.style.display = "block";
    })
    document.getElementById("close").addEventListener("click", function () {
        const modal = new Modal();
        if (modal) {
            console.log(modal);
            modal.style.display = "none";
        }
    })

</script>

</html>

JavaScript实现单例模式有两种形式

第一种静态方法实现

class Modal{
	static getInstance(){
	if(!Modal.instance){
	Modal.instance = new Modal();
	}
	return Modal.instance;
	}
}

第二种闭包形式实现

class Modal{
}
Modal.getInstance = (function(){
let instance = null;
return function(){
if(!instance){
instance = new Modal();
}
return instance;
}
})()