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

時間 2019-11-07

原文原文鏈接

單例模式: 保證一個類僅有一個實例，並提供一個訪問它的全局訪問點html

用代理實現單例模式

應用場景：

使用 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
複製代碼

惰性單例

指的是在須要的時候才建立對象實例。惰性單例是單例模式的重點bash

應用場景：

建立惟一的浮窗app

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';
};
複製代碼