javascript設計模式學習筆記之單例模式

單例模式

• 單例模式 就是保證一個類僅有一個實例, 並提供一個訪問它的全局訪問點.
• 其最大的特色就是 永遠只返回一個實例

var Singleton = function (name) {
        this.name = name;
        // instance 實例
        this.instance = null;
    };

    Singleton.prototype.getName = function () {
        console.log(this.name);
    };
    
    // 經過queryInstance 來獲取 Singleton 類的惟一對象
    Singleton.queryInstance = function (name) {
        if (!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance;
    }

    var a = Singleton.queryInstance('a');
    var b = Singleton.queryInstance('b');
    
    console.log(a);  // {name: 'a', instance: null}
    console.log(b);  // {name: 'a', instance: null}
    console.log(a === b);  // true

• 其缺點也明顯, 增長了 類的 不透明性

透明的單例模式

var CreateDiv = (function () {
        var instance;
        
        // CreateDiv 最終會被返回
        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('a');
    var b = new CreateDiv('b');

    console.log(a);
    console.log(b);
    console.log(a === b);

使用代理實現單例模式

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);
    }
    // 將負責管理單例的邏輯移到了代理類中.
    // 這樣CreateDiv 就變成了一個普通的類
    var ProxySingletonCreateDiv = (function () {
        var instance;
        return function (html) {
            if (!instance) {
                instance = new CreateDiv(html);
            }
            return instance;
        }
    })();

    var a = new ProxySingletonCreateDiv('a');
    var b = new ProxySingletonCreateDiv('b');

惰性單例

• 在須要的時候才建立對象實例

// 這個函數就是建立一個 通用的惰性單例模式
    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';
    }