js设计模式之惰性单例模式

<html> 
 <body> 
 <button id="loginBtn">登录</button> 
 </body> 
<script> 
 var createLoginLayer = function(){ 
 var div = document.createElement( 'div' ); 
 div.innerHTML = '我是登录浮窗'; 
 div.style.display = 'none'; 
 document.body.appendChild( div ); 
 return div; 
 }; 
 document.getElementById( 'loginBtn' ).onclick = function(){ 
 var loginLayer = createLoginLayer(); 
 loginLayer.style.display = 'block'; 
 }; 
</script> 
</html>

当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 div。虽然我们可以在点击浮窗上的关闭按钮时（此处未实现）把这个浮窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理的，也是不必要的。

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

var createLoginLayer = function(){ 
 var div = document.createElement( 'div' ); 
 div.innerHTML = '我是登录浮窗'; 
 div.style.display = 'none'; 
 document.body.appendChild( div ); 
 return div; 
}; 

var createSingleLoginLayer = getSingle( createLoginLayer ); 

document.getElementById( 'loginBtn' ).onclick = function(){ 
 var loginLayer = createSingleLoginLayer(); 
 loginLayer.style.display = 'block'; 
};

在 getSinge 函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。