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
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
