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

什么是单例模式

简单点来说，单例模式就是确保某个类只有一个实例，并且最好只被创建过一次。对计算机来说，像打印机，线程池都是经典的单例模式。对于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';}

关键字：JavaScript, 设计模式, var, div

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！