《JavaScript设计模式与开发实践》—

《JavaScript设计模式与开发实践》—— 单例模式

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

单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的 window 对象等。在 JavaScript 开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

（1）透明的单例模式

在下面的例子中，我们将使用 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( 'suv1' );
var b = new CreateDiv( 'suv2' );
alert( a === b );  // true

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

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

（2）用代理实现单例模式

首先在 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 Proxy = (function () {

    var instance;

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

var a = new Proxy( 'suv1' );
var b = new Proxy( 'suv2' );
alert( a === b );  // true

（3） JavaScript中的单例模式

前面提到的几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。

我们要记住：单例模式的核心是确保只有一个实例，并提供全局访问。
作为普通的开发者，我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。
1. 最简单的方法依然是用对象字面量的方式：

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

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

var user = (function () {
    var _name = 'Hushaby',
        _age = 21;

    return {
        getUserInfo : function () {
            return _name + ' - ' + _age;
        }
    }
})();
alert(user.getUserInfo());

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

（4）惰性单例

惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，这种技术在实际开发中非常有用，有用的程度可能超出了我们的想象。

假设我们是 WebQQ 的开发人员（网址是web.qq.com），当点击左边导航里 QQ 头像时，会弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现同时存在两个登录窗口的情况。

第一种解决方案是在页面加载完成的时候创建好这个div悬浮窗，这个悬浮窗一开始是隐藏的，用户点击登录的时候才出现。

<button id="loginBtn" >登录</button>

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

这种方式有一个问题，因为登录浮窗总是一开始就被创建好，那么很有可能将白白浪费一些 DOM 节点。

那么我们采用第二种方式，当用户点击才创建该悬浮窗：

<button id="loginBtn" >登录</button>

    <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 () {
            var login = loginLayer();
            login.style.display = 'block';
        }
    </script>

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

那么我们可以采取前面的方式：

 <button id="loginBtn" >登录</button>

    <script>
        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;
                }
                return div;
            }
        })();

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

（5）通用的惰性单例

我们完成了一个可用的惰性单例，但是我们发现它还有如下一些问题。

这段代码仍然是违反单一职责原则的，创建对象和管理单例的逻辑都放在 createLoginLayer对象内部。

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

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 已经被赋值，那么它将返回这个值。完整代码如下：

<button id="loginBtn" >登录</button>

    <script>
        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 login = createSingleLoginLayer();
            login.style.display = 'block';
        }
    </script>

（6）小结

单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。