設計模式之單例模式（《JavaScript設計模式與開發實踐》讀書筆記）

單例模式，傳說中最簡單，最容易理解的設計模式

其實單例模式有不少方式去實現，下面我將書上所說一一展示

最簡單的實現方式

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
    }
    // 或者 getInstance 也能夠用另外一種方式實現
    Singleton.getInstance = (function () {
        var instance = null
        return function (name) {
            if (!instance) {
                instance = new Singleton(name)
            }
            return instance
        }
    })();
    
    // 調用
    var a = Singleton.getInstance('a')
    var b = Singleton.getInstance('b')
    
    console.log(a === b) // true
複製代碼

上面代碼中getInstance方法用了兩種不一樣方式實現，可是原理都是同樣的，只不過是一個把實例屬性放在本實例內，一個是利用閉包放在局部變量中。

這樣寫的方式有一個缺點，就是和正常的生成實例方法不同，讓人不容易理解

正常生成實例方法

var CreateDiv = (function () {
        var instance = null;
        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.append(div);
        }
        
        return CreateDiv
        
    })();

複製代碼

這種方法雖然可以以new 去生成單例，可是建立對象和保證單例耦合在了一塊兒，不符合單一職責原則。因此還要改

用代理實現單一模式

var CreateDiv = function (html) {
        this.html = html;
        this.init();
    }
    
    CreateDiv.prototype.init = function () {
        var div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.append(div);
    }
    
    var ProxySingletonCreateDiv = (function () {
        var instance;
        return function (html) {
            if (!instance) {
                instance = new CreateDiv(html);
            }
            return instance;
        }
    })();
複製代碼

經過代理模式，創造對象和保證單例的方法分開，更易擴展

惰性單例

var createLoginLayer = function () {
        var div = document.createElement('div');
        div.innerHTML = '我是登陸浮窗';
        div.style.display = 'none';
        document.body.appendChild(div);
        return div;
    }
    
    var getSingle = function (fn) {
        var result;
        return function () {
            return result || (result = fn.apply(this, arguments));
        }
    }
    
    var createSingleLoginLayer = getSingle(createLoginLayer);
    // 當須要調用的時候 再調用這個方法
複製代碼

惰性單例的優勢能夠當我須要的再去建立這個單例，而不是頁面已加載就建立。