单例设计模式小demo

本文链接： https://blog.csdn.net/weixin_43414945/article/details/102753153

回顾了一下单例设计模式，所谓单例设计模式，就是一个类只有一个实例，这句话在小红书上也接触到过，刚开始没有理解，而且这句话的潜在意识是一个类也可能会有多个实例，例如通过new关键字创建的实例，每一个实例都是不一样的，每一个实例都是指向不同的引用，而单例，就是一个类只能放回一个对象，无论调用多少次，如果存在已创建的实例，则返回的是undefine；废话不多说，上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box1{
            width:200px;
            height: 50px;
            background:blue;
        }
        #box1>span{
            width:20px;
            height: 10px;
            background:red;
            margin-top: 40px;
        }
        #box1>#ok{
            margin-right:10px;
        }
        #box1>#cancel{
            margin-left:10px;
        }

    </style>
</head>
<body>
     <script>
         //点击展示一个界面 用单例来实现 使用场景 相同的实例只展示一次 例如页面的登录框
         window.onload=function(){
             var btn = document.querySelector('#box');
             //console.log(btn);
             btn.onclick = function(){
                 singleton();
             }
             //用立即执行函数封装一个singleton方法
             var singleton = (
                 function(){
                   //初始化一个变量 
                    var psy = null;
                    //立即执行函数（闭包）返回一个函数
                    return function(){
                        if(!psy){
                    //如果psy不为空这创建一个弹出框
                    psy = document.createElement('div');
                    psy.id = 'box1';
                    psy.innerHTML ='你确定要删除吗';

                    var okEle = document.createElement('span');
                    okEle.id='ok';
                    okEle.innerHTML = '确定';
                    okEle.onclick =function () {
                        psy.remove();
                        //此时要将psy重新赋值为空 psy虽然再页面中被删除 但是dom元素依然存在与内存中
                        psy = null;
                        
                    }

                    var cancelEle = document.createElement('span');
                    
                    cancelEle.id='cancel';
                    cancelEle.innerHTML = '取消';
                    cancelEle.onclick =function () {
                        psy.remove();
                        //此时要将psy重新赋值为空 psy虽然再页面中被删除 但是dom元素依然存在与内存中
                        psy = null;
                        
                    }
                    psy.appendChild(okEle);
                    psy.appendChild(cancelEle);
                    document.body.appendChild(psy);

                        }
                    }
                 }
                 
             )()

         }
    </script>
     <button id = 'box'>点击显示</button>
</body>
</html>

理解单例一定要在使用场景去理解，最普遍的使用场景就是，页面的弹出框，当用户多次点击一个按钮，警告框指挥弹出一个。不足之处，敬请校验。

单例设计模式小demo

猜你喜欢