JavaScript设计模式学习—单例模式

TerryCai 发布于2019-08-19 18:45 / 2497人阅读

摘要：什么是单例模式简单点来说，单例模式就是确保某个类只有一个实例，并且最好只被创建过一次。对计算机来说，像打印机，线程池都是经典的单例模式。

什么是单例模式

简单点来说，单例模式就是确保某个类只有一个实例，并且最好只被创建过一次。对计算机来说，像打印机，线程池都是经典的单例模式。对于JavaScript所处的前端环境来说，像登录悬浮框，在整个页面中只会有一个，无论用户点击多少次，只会被创建一次。

单例模式实现实例—登录框

单例模式非常好理解，无非是办公室有个打印机，大家一起公用，没必要再每个人多带带买一个了。所以按照这样的理解，先写出前端创建悬浮登录框的前端代码：

var createLoginDialog = function(){
    var div = document.createElement("div");
    div.innerHTML="登录悬浮框";
    var closeBtn = document.createElement("button");
    closeBtn.innerHTML = "X";
    div.appendChild(closeBtn);
    closeBtn.onclick = function(){
        div.style.display="none";
    }
    document.body.appendChild(div);
    return div;
}
document.getElementById("loginBtn").onclick = function(){
    var loginDiv = createLoginDialog();
}

这应该是我们平时写出的“一般”实现单例代码，看起来单例是实现了。但有很大问题，就是每次创建都会新生成一个div，性能损耗不谈，本身也不是真正实现了单例模式。
单例模式的关键实现一是要在需要创建的时候才开始创建，即惰性创建，第二就是只被创建一次，再次使用的时候，不需要重复创建。在其他语言实现中，需要借助静态方法或者其他手段来使代码驻留内存，达到这一目的。JavaScript却不提供，但内存驻留却使我们想到了闭包。
所以再次修改代码，创建一个闭包来实现。

var createLoginDialog = (function(){
        var div;
        return function(){
            if(!div){
                    div = document.createElement("div");
                    div.innerHTML="登录悬浮框";
                    var closeBtn = document.createElement("button");
                    closeBtn.innerHTML = "X";
                    div.appendChild(closeBtn);
                    closeBtn.onclick = function(){
                        div.style.display="none";
            }
                    document.body.appendChild(div);
            }else{
                        div.style.display="block";
            }
            return div;
        }
})();
document.getElementById("loginBtn").onclick = function(){
        var loginDiv = createLoginDialog();
}

抽象出JavaScript单例模式表达

实际上，对于js单例模式最核心的逻辑就是

var obj;
if(!obj){
    obj = XXX;
}

而对于以上最后写出的创建代码，也不尽完美，因为它违反了设计模式中的单一职原则。即创建对象和管理单例的逻辑都放在一个类的内部。
据此，我们可以剥离出创建单例模式的方法

var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }

最终在这个方法下实现代码：

var createLoginDialog = function(){
            var div = document.createElement("div");
            div.innerHTML="登录悬浮框";
            var closeBtn = document.createElement("button");
            closeBtn.innerHTML = "X";
            div.appendChild(closeBtn);
            closeBtn.onclick = function(){
                div.style.display="none";
            }
            document.body.appendChild(div);
            return div;
        }
var getSingleton = function(fn){
            var result;
            return function(){
                return result || (result = fn.apply(this,arguments));
            }
        }
var createSingletonLogin = getSingleton(createLoginDialog);
document.getElementById("loginBtn").onclick = function(){
            var loginDiv = createSingletonLogin();
            loginDiv.style.display = "block";
}

云服务器 GPU云服务器单例模式单例模式实现单例模式总结 pdo单例模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79956.html

javascript设计模式学习笔记之单例模式

摘要：单例模式单例模式就是保证一个类仅有一个实例并提供一个访问它的全局访问点其最大的特点就是永远只返回一个实例实例通过来获取类的唯一对象其缺点也明显增加了类的不透明性透明的单例模式最终会被返回使用代理实现单例模式将负责管理单例的逻辑移到了代理类中单例模式单例模式就是保证一个类仅有一个实例, 并提供一个访问它的全局访问点. 其最大的特点就是永远只返回一个实例 var Sin...

xiaolinbang 2019-08-23 15:54 评论0 收藏0
JavaScript设计模式之单例模式

摘要：原文博客地址单例模式系统中被唯一使用，一个类只有一个实例。中的单例模式利用闭包实现了私有变量两者是否相等弱类型，没有私有方法，使用者还是可以直接一个，也会有方法分割线不是单例最简单的单例模式，就是对象。原文博客地址：https://finget.github.io/2018/11/06/single/ 单例模式系统中被唯一使用，一个类只有一个实例。实现方法一般是先判断实例是否存在，...

lk20150415 2019-08-23 13:46 评论0 收藏0
JavaScript设计模式与开发实践系列之单例模式

摘要：本系列为设计模式与开发实践作者曾探学习总结，如想深入了解，请支持作者原版单例模式实现单例模式单例模式的定义是保证一个类仅有一个实例，并提供一个访问它的全局访问点。本系列为《JavaScript设计模式与开发实践》（作者：曾探）学习总结，如想深入了解，请支持作者原版单例模式实现单例模式单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种常用的模式...

Airy 2019-08-19 17:47 评论0 收藏0
探索Javascript设计模式---单例模式

摘要：单例模式主要是为了解决对象的创建问题。页面中只放一个按钮登录实现得到登录框元素绑定事件关闭弹框这里做登录点击页面中的按钮每次让登录框出现即可上面的代码根据单例模式的使用构造函数来实现的。最近打算系统的学习javascript设计模式，以便自己在开发中遇到问题可以按照设计模式提供的思路进行封装，这样可以提高开发效率并且可以预先规避很多未知的问题。先从最基本的单例模式开始。什么是单例...

Hanks10100 2019-08-20 14:27 评论0 收藏0
单例模式 | 程序员都想要探索的 Javascript 设计模式

摘要：单例模式主要是为了解决对象的创建问题。页面中只放一个按钮登录实现得到登录框元素绑定事件关闭弹框这里做登录点击页面中的按钮每次让登录框出现即可上面的代码根据单例模式的使用构造函数来实现的。 showImg(https://segmentfault.com/img/bVbiE4g?w=568&h=450);最近打算系统的学习 Javascript 设计模式，以便自己在开发中遇到问题可以按照...

rottengeek 2019-08-23 12:32 评论0 收藏0