《JavaScript設計模式與開發實踐》模式篇(1)—— 單例模式

嗨呀豆豆呢發表於2018-12-11

單例模式: 保證一個類僅有一個例項,並提供一個訪問它的全域性訪問點

用代理實現單例模式

應用場景:

使用 CreateDiv 單例類,它的作用是負責在頁 面中建立唯一的 div 節點

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 );
//true複製程式碼

惰性單例

指的是在需要的時候才建立物件例項。惰性單例是單例模式的重點

應用場景:

建立唯一的浮窗

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';

};
複製程式碼

系列文章:

《JavaScript設計模式與開發實踐》最全知識點彙總大全

來源:https://juejin.im/post/5c0f5ca4f265da616d540801

相關文章