JavaScript 23 种设计模式之 1 单例模式

今天药忘吃喽~ 2023-03-13 01:53 169阅读 0赞

### JavaScript 23 种设计模式之 1 单例模式 ###

*  概念与特点
 *  结构与实现
 *  应用场景
 *  应用实例

# 概念与特点 #

概念：  
单例模式简单的说就是一个类只能有一个实例，然后提供一个公有的访问该实例的方法。单例又分为懒汉式单例和饿汉式单例。  
懒汉式单例：类加载的时候没有创建，使用的时候才创建。  
饿汉式单例：类一旦加载，实例就已经被创建。  
懒汉式单例与饿汉式单例的区别在于饿汉式单例可以拓展参数。

特点：

1.  一个类只能有一个实例对象。
2.  该实例对象由单例类自行创建。
3.  对外提供一个访问该单例的私有方法。

优点：

1.  节省内存资源。
2.  保证数据内容的一致性。

# 结构与实现 #

单例模式主要由**私有构造函数、私有实例和私有访问实例的方法**组成。

懒汉式单例：

//懒汉单例
        var SingletonEager = (function () { 
            //私有构造函数
            function SingletonLazy(name) { 
                this.name = name;
            }
            //私有实例
            var instance;
            //私有方法
            function getInstance(name) { 
                if(!instance){ 
                    instance = new SingletonEager(name);
                }
                return instance;
            }
            return { 
                getInstance
            }
        })()
        var a = SingletonEager.getInstance("jack");
        var b = SingletonEager.getInstance("rose");
        console.log(a)//{name:"jack"}
        console.log(a === b)//true

饿汉式单例：

//饿汉单例
        var SingletonLazy = (function () { 
            //私有构造函数
            function SingletonLazy(name) { 
                this.name = name;
            }
            //私有实例
            var instance = new SingletonLazy("jack");
            //私有方法
            function getInstance() { 
                return instance;
            }
            return { 
                getInstance
            }
        })()
        var a = SingletonLazy.getInstance();
        var b = SingletonLazy.getInstance();
        console.log(a)//{name:"jack"}
        console.log(a === b)//true

# 应用场景 #

1.  当类只需要生成一个实例的时候。比如班长只有一个，总统只有一个。
2.  当类需要频繁实例化，又会被频繁销毁的时候。比如最常见的弹窗提示。
3.  当类需要被共享的时候，为了保证数据统一性，只创建一个实例。比如配置文件。

# 应用实例 #

做一个提示弹框。保证不管点击多少次，每天都只弹出一个弹框。  
![在这里插入图片描述][20200511143814512.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>React App</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <style>
        .tip{ 
            position: fixed;
            top:10px;
            left: 10px;
            right:10px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            border: 1px solid red;
            box-shadow: 1px 1px 1px 0 #f1f1f1;
            padding: 5px;
            color: red;
        }
    </style>
    <body>
    <div style="text-align: center"><button onclick="tip()" style="margin-top: 100px">提交</button></div>
    
    <script>
        function tip() { 
            var msg = "请稍后重试";
            //获取单例
            singleEager.getSingle(msg);
        }
        //饿汉单例
        var singleEager = (function () { 
            var timer;
            function singleEager(text) { 
                var el =  document.createElement("div");
                el.className = "tip";
                el.textContent = text;
                el.id = "tip";
                return el
            }
            var instance;
            function   getSingle(text){ 
                if(!document.body.contains(document.getElementById("tip"))){ 
                    instance = singleEager(text);
                    document.body.appendChild(instance);
                };
                //防抖处理
                if(!timer){ 
                    timer = setTimeout(()=>{ 
                        if(document.body.contains(instance)){ 
                            document.body.removeChild(instance);
                        };
                        clearTimeout(timer);
                        timer = null;
                    },1000);
                }
                return instance
            }
            return { 
                getSingle
            }
        })();
    </script>
    </body>
    </html>

[20200511143814512.png]: /images/20230312/dc73dd1c792c45a78ab11671af577b3c.png