（二）设计模式-单例模式

实现单例模式

单例模式的定义是: 保证一个类仅有一个实例，并提供一个访问它的全局访问点。

单例模式的实现，使用一个变量来标志当前是否已经为某个创建过对象，如果是，则在下一次获取该类的实例的时候，直接返回之前创建的对象。

var Singleton = function( name ){ 
 this.name = name; 
 this.instance = null; 
}; 
Singleton.prototype.getName = function(){ 
 alert ( this.name ); 
}; 
Singleton.getInstance = function( name ){ 
 if ( !this.instance ){ 
 this.instance = new Singleton( name ); 
 } 
 return this.instance; 
}; 
var a = Singleton.getInstance( 'sven1' ); 
var b = Singleton.getInstance( 'sven2' ); 
alert ( a === b ); // true

（2）透明的单例模式

var CreateDiv = (function(){ 
 var instance; 
 var CreateDiv = function( html ){ 
 if ( instance ){ 
 return instance; 
 } 
 this.html = html; 
 this.init();
 return instance = this; 
 }; 
 CreateDiv.prototype.init = function(){ 
 var div = document.createElement( 'div' ); 
 div.innerHTML = this.html; 
 document.body.appendChild( div ); 
 }; 
 return CreateDiv; 
})(); 
var a = new CreateDiv( 'sven1' ); 
var b = new CreateDiv( 'sven2' ); 
alert ( a === b ); // true

（3）用代理实现单例模式

var CreateDiv = function( html ){ 
 this.html = html;
 this.init(); 
}; 
CreateDiv.prototype.init = function(){ 
 var div = document.createElement( 'div' ); 
 div.innerHTML = this.html; 
 document.body.appendChild( div ); 
};
var ProxySingletonCreateDiv = (function(){ 
 var instance; 
 return function( html ){ 
 if ( !instance ){ 
 instance = new CreateDiv( html ); 
 } 
 return instance; 
 } 
})(); 
var a = new ProxySingletonCreateDiv( 'sven1' ); 
var b = new ProxySingletonCreateDiv( 'sven2' ); 
alert ( a === b );

将负责管理单例的逻辑移到代理类中，组合达到了单例模式的效果。

（4）js中的单例模式

单例模式的核心是确保只有一个实例，并提供全局访问。

降低全局变量的污染
1、使用命名空间：
2、使用闭包封装私有变量，只暴露一些接口跟外界通信。

var user = (function(){ 
 var __name = 'sven', 
 __age = 29; 
 return { 
 getUserInfo: function(){ 
 return __name + '-' + __age; 
 } 
 } 
})();

（5）惰性单例
惰性单例是指在需要的时候才创建对象实例，
把创建实例对象的职责和管理单例的职责分别放置在两个方法中，这两个方法可以独立变化而互不影响，

var getSingle = function( fn ){ 
 var result; 
 return function(){ 
 return result || ( result = fn .apply(this, arguments ) ); 
 } 
};
 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'; 
};