シングルトンデザインパターンの小さなデモ

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/weixin_43414945/article/details/102753153

何シングルトンデザインパターン投稿、いわゆるシングルトンデザインパターンは、クラスのインスタンスが1つしかない、また前にさらさ小さな赤い本の中でこの文は、単に理解していない始め、この文の可能性の意識もクラスであります複数のインスタンスが存在してもよい、新しいキーワードによって作成された例、例えば、各インスタンスは同じではないにかかわらず、各インスタンスは、基準の異なる点であり、シングルトンができる唯一のバックオブジェクトにクラスでありますインスタンスが存在して作成されている場合は、何度も呼び出し、戻り値は未定義であり、騒ぎ、コードに。

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

シングルトンは、使用シナリオを理解するために理解する必要があり、最も一般的な使用シナリオは、ポップアップページ、ユーザーがボタンをクリックし、何度、ポップアップ警告ボックスコマンドです。不十分な、確認してください。

シングルトンデザインパターンの小さなデモ

おすすめ