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