4-单例模式

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

一、标准单例模式

//e.g.method1
var Singleton = function(){
    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('qqli1');
var b = Singleton.getInstance('qqli2');

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


//e.g.method2, 采用闭包的方式
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('qqli1');
var b = Singleton.getInstance('qqli2');

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

上面的demo并不透明，使用Singleton.getInstance 来获取对象

二、透明的单例模式

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("qqli1");
var b = new CreateDiv("qqli2");

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

虽然现在完成了一个透明的单例类的编写，但它同样有一些缺点。

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

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

    this.html = html;
    this.init();

    return instance = this;
};

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

假设我们某天需要利用这个类，在页面中创建千千万万的div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写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);
}

// 实现单例
var proxySingletonCreateDiv = (function () {
    var instance;

    return function () {
        if(!instance) {
            instance = new CreateDiv(html);
        }

        return instance;
    }
})();

var a = new proxySingletonCreateDiv ("qqli1");
var b = new proxySingletonCreateDiv ("qqli2");

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

四、JavaScript 中的单例模式

前面提到的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。在以类为中心的语言中，这是很自然的做法。比如在Java 中，如果需要某个对象，就必须先定义一个类，对象总是从类中创建而来的。

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

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

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

var a = {};

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

但是全局变量存在很多问题，它很容易造成命名空间污染。在大中型项目中，如果不加以限制和管理，程序中可能存在很多这样的变量。JavaScript 中的变量也很容易被不小心覆盖，相信每个JavaScript 程序员都曾经历过变量冲突的痛苦，就像上面的对象var a = {};，随时有可能被别人覆盖。

我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。

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，它们被封装在闭包产生的作用域中，外部是访问不到这两个变量的，这就避免了对全局的命令污染。

五、惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象，实际上在本章开头就使用过这种技术，instance 实例对象总是在我们调用Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建，代码如下：

Singleton.getInstance = (function(){
    var instance = null;

    return function( name ){
        if ( !instance ){
            instance = new Singleton( name );
        }
        return instance;
    }
})();

以WebQQ 的登录浮窗为例，介绍与全局变量结合实现惰性的单例。

//方法一
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';
};

//登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些DOM节点。

//方法二
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';
};

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

虽然现在达到了惰性的目的，但失去了单例的效果。当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗div。虽然我们可以在点击浮窗上的关闭按钮时（此处未实现）把这个浮窗从页面中删除掉，但这样频繁地创建和删除节点明显是不合理的，也是不必要的。

//方法三
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 函数几乎照抄一遍：

var createIframe= (function(){
    var iframe;
    return function(){
        if ( !iframe){
            iframe= document.createElement( 'iframe' );
            iframe.style.display = 'none';
            document.body.appendChild( iframe);
        }
        return iframe;
    }
})();

我们需要把不变的部分隔离出来，先不考虑创建一个div 和创建一个iframe 有多少差异，管理单例的逻辑其实是完全可以抽象出来的，这个逻辑始终是一样的：用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：

var obj;
if ( !obj ){
    obj = xxx;
}

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

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

接下来将用于创建登录浮窗的方法用参数fn 的形式传入getSingle，我们不仅可以传入createLoginLayer，还能传入createScript、createIframe、createXhr 等。之后再让getSingle 返回一个新的函数，并且用一个变量result 来保存fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果result 已经被赋值，那么它将返回这个值。

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 事件实际上只需要在第一次渲染列表的时候被绑定一次，但是我们不想去判断当前是否是第一次渲染列表，如果借助于jQuery，我们通常选择给节点绑定one 事件：

var bindEvent = function(){
    $( 'div' ).one( 'click', function(){
        alert ( 'click' );
    });
};

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

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


//如果利用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 实际上只被绑定了一个事件。