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

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(name) {
    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类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的“不透明性”，Singleton类的使用者必须知道这是一个单例类，跟以往通过new XXX的方式来获取对象不同，这里偏要使用Singleton.getInstance来获取对象。

透明的单例模式

我们现在的目标是实现一个“透明”的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。在下面的例子中，我们将使用CreateDiv单例类，它的作用是负责在页面中创建唯一的div节点：

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

为了把instance封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回真正的CreateDiv构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服。

观察现在的CreateDiv构造函数：

var CreateDiv = function(html) {
    if (instance) {
        return instance;
    }
    this.html = html;
    this.init();
    return instance = this;
};

在这段代码中，CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法，第二是保证只有一个对象。虽然目前还没有接触过“单一职责原则”的概念，但可以明确的是，这是一种不好的做法，至少这个构造函数看起来很奇怪。

假设我们某天需要利用这个类，在页面中创建千千万万的div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写CreateDiv构造函数，把控制创建唯一对象的那一段去掉，这种修改会给我们带来不必要的烦恼。

用代理实现单例模式

现在我们通过引入代理类的方式，来解决上面提到的问题。

我们依然使用上面的代码，首先在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);
};

接下来引入代理类proxySingletonCreateDiv：

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

通过引入代理类的方式，我们完成了一个单例模式的编写，我们把负责管理单例的逻辑移到了代理类 proxySingletonCreateDiv中，这样一来，CreateDiv就变成了一个普通的类，它跟proxySingletonCreateDiv组合起来可以达到单例模式的效果。

JavaScript中的单例模式

前面的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。在以类为中心的语言中，这是很自然的做法。

但JavaScript是一门无类语言，也正因为如此，生搬单例模式的概念并无意义。在JavaScript中创建对象的方法非常简单，既然我们只需要一个“唯一”的对象，为什么要先为它创建一个“类”呢？传统的单例模式的实现在JavaScript中并不适用。

单例模式的核心是确保只有一个实例，并提供全局访问。

全局变量不是单例模式，但在JavaScript开发中，我们经常会把全局变量当成单例来使用。

例如：

var a = {};

当用这种方式创建对象a时，对象a确实是独一无二的。如果a变量被声明在全局作用域下，则我们可以在代码中的任何位置使用这个变量，全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。

但是全局变量存在很多问题，它很容易造成命名空间污染。JavaScript中的变量也很容易被不小心覆盖。作为普通的开发者，我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染：

1.使用命名空间

适当地使用命名空间，并不会杜绝全局变量，但可以减少全局变量的数量。最简单的方法依然是用对象字面量的方式：

var namespace1 = {
    a: function() {
        alert(1);
    },
    b: function() {
        alert(2);
    }
};

把a和b都定义为namespace1的属性，这样可以减少变量和全局作用域打交道的机会。另外，我们还可以动态地创建命名空间：

var MyApp = {};

MyApp.namespace = function(name) {
    var parts = name.split('.');
    var current = MyApp;
    for (var i in parts) {
        if (!current[parts[i]]) {
            current[parts[i]] = {};
        }
        current = current[parts[i]];
    }
};

MyApp.namespace('event');
MyApp.namespace('dom.style');

console.dir(MyApp);

上述代码等价于：

var MyApp = {
    event: {},
    dom: {
        style: {}
    }
};

2.使用闭包封装私有变量

这种方法把一些变量封装在闭包的内部，只暴露一些接口跟外界通信：

var user = (function() {
    var _name = 'sven',
        _age = 29;
    
    return {
        getUserInfo: function() {
            return _name + '-' + _age;
        }
    }
})();

我们用下划线来约定私有变量_name和_age，它们被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。

惰性单例

惰性单例指的是在需要的时候才创建对象实例。

下面我们以WebQQ的登录浮窗为例，介绍与全局变量结合实现惰性的单例。如下图，当点击左侧导航的QQ头像时，会弹出一个登录浮窗，很明显这个浮窗在页面中是唯一的，不可能同时出现两个登录浮窗。

解决方案：

1.在页面加载完成的时候便创建好这个div浮窗，一开始是隐藏的，当用户点击登录按钮的时候，它才开始显示：

<html>
    <body>
        <button id="loginBtn">登录</button>
    </body>
    
    <script>
        var loginLayer = (function() {
            var div = document.createElement('div');
            div.innerHTML = '我是登录浮窗';
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        })();
        
        document.getElementById('loginBtn').onclick = function() {
            loginLayer.style.display = 'block';
        };
    </script>
</html>

问题：

进入WebQQ如果只是玩玩游戏或者看看天气，根本不需要进行登录操作，因为登录浮窗从一开始就被创建好了，很有可能白白浪费一些DOM节点。

2.用户点击登录按钮的时候才开始创建该浮窗：

<html>
    <body>
        <button id="loginBtn">登录</button>
    </body>
    
    <script>
        var createLoginLayer = function() {
            var div = document.createElement('div');
            div.innerHTML = '我是登录浮窗';
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        };
        
        document.getElementById('loginBtn').onclick = function() {
            var loginLayer = createLoginLayer();
            loginLayer.style.display = 'block';
        };
    </script>
</html>

问题：

虽然达到了惰性的目的，但失去了单例的效果。每次点击登录按钮都会创建一个新的登录浮窗div。

3.用一个变量来判断是否创建过登录浮窗：

var createLoginLayer = (function() {
    var div;
    return function() {
        if (!div) {
            div = document.createElement('div');
            div.innerHTML = '我是登录浮窗';
            div.style.display = 'none';
            document.body.appendChild(div);
        }
        return div;
    }           
})();

document.getElementById('loginBtn').onclick = function() {
    var loginLayer = createLoginLayer();
    loginLayer.style.display = 'block';
};

通用的惰性单例

上一节的惰性单例还是存在一些问题：

• 仍然违反单一职责原则，创建对象和管理单例的逻辑都放在createLoginLayer对象内部。
• 如果我们下次需要创建页面中唯一的iframe，或者script标签，用来跨域请求数据，就必须得如法炮制，把createLoginLayer函数几乎照抄一遍。

先把如何管理单例的逻辑抽离出来，这些逻辑被封装在getSingle函数内部，创建对象的方法fn被当成参数动态传入getSingle函数：

var getSingle = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments));
    }
};

接下来将用于创建登录浮窗的方法用参数fn的形式传入getSingle：

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

下面我们再试试创建唯一的iframe用于动态加载第三方页面：

var createSingleIframe = getSingle(function() {
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    return iframe;
});

document.getElementById('loginBtn').onclick = function() {
    var loginLayer = createSingleIframe();
    loginLayer.src = 'http://baidu.com';
};

这种单例模式的用途远不止创建对象，比如我们通常渲染完页面中的一个列表之后，接下来要给这个列表绑定click事件，如果是通过ajax动态往列表里追加数据，在使用事件代理的前提下，click事件实际上只需要在第一次渲染列表的时候被绑定一次，但是我们不想判断当前是否是第一次渲染列表，利用getSingle函数，可以达到效果：

var bindEvent = getSingle(function() {
    document.getElementById('div1').onclick = function() {
        alert('click');
    };
    return true;
});

var render = function() {
    console.log('开始渲染列表');
    bindEvent();
};

render();
render();
render();

可以看到，render函数和bindEvent函数都分别执行了3次，但div实际上只被绑定了一个事件。