Singleton design pattern small demo

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/weixin_43414945/article/details/102753153

Reviewed what Singleton design pattern, the so-called Singleton design pattern, there is only one instance of a class, this sentence in the little red book also exposed to before, just started not to understand, and awareness of the potential of this sentence is also a class there may be more than one instance, for example instance created by the new keyword, each instance is not the same, each instance is different point of reference, and singleton is a class can only back into an object, regardless call many times, if the instance has been created exist, the return is undefine; ado, on the code.

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

Singleton must be understood to understand the usage scenario, the most common usage scenario is that pop-up pages, many times when the user clicks a button, a pop-up alert box command. Inadequate, please check.

Singleton design pattern small demo

Guess you like