JavaScript设计模式与开发实践-读书笔记单例模式

Posted 2020-08-13

单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

1.实现单例模式

要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。

    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;
    };
    var a = Singleton.getInstance(‘sven1‘);
    var b = Singleton.getInstance(‘sven2‘);
    alert(a === b);  //true

或者：

    var Singleton = function(name){
        this.name = name;
    };
    Singleton.prototype.getName = function(){
        alert(this.name);
    };
    Singleton.getInstance = (function(){
        var instance = null;
        return function(name){
            if(!instance){
                instance = new Singleton(name);
            }
            return instance;
        }
    })();
    var a = Singleton.getInstance(‘sven1‘);
    var b = Singleton.getInstance(‘sven2‘);
    alert(a === b);  //true

我们通过Singleton.getInstance来获取Singleton类的唯一对象，这种方式相对简单，但是有一个问题，增加了这个类的"不透明性"。
这段单例模式代码的意义并不大。

 

2.透明的单例模式

我们现在的目标是实现一个"透明"的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。

var CreateDiv = (function(){
        var instance;
        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(‘sven1‘);
    var b = new CreateDiv(‘sven2‘);
    alert(a === b);  

但它同样有一些缺点。
CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化方法init方法，第二是保证只有一个对象。违背了"单一职责原则"。

 

3.用代理实现单例模式

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

View Code