JavaScript设计模式 Item 6 --单例模式Singleton

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

单例模式是一种经常使用的模式，有一些对象咱们每每只须要一个，好比线程池、全局缓存、浏览器的window对象。在js开发中，单例模式的用途一样很是普遍。试想一下，当咱们单击登陆按钮的时候，页面中会出现一个登陆框，而这个浮窗是惟一的，不管单击多少次登陆按钮，这个浮窗只会被建立一次。所以这个登陆浮窗就适合用单例模式。

一、单例模式的使用场景

在使用一种模式以前，咱们最好要知道，这种模式的使用场景。用了这么久的单例模式，竟全然不知！用它具体有哪些好处呢？

• 1.能够用它来划分命名空间(这个就是就是常常用的了)

• 2.利用分支技术来封装浏览器之间的差别(这个还真没用过，挺新鲜)

• 3.借助单例模式，能够把代码组织的更为一致，方便阅读与维护(这个也用过了)

二、最基本的单例模式

最简单的单例其实就是一个对象字面量。它把一批有必定关联的方法和属性组织在一块儿。

var Singleton = {
    attr1: true , 
    attr2: 10 ,
    method1 : function(){
        alert('我是方法1');
    },
    method2 : function(){
        alert('我是方法2');
    }
};

这个对象能够被修改。你能够添加属性和方法。你也能够用delete运算符删除现有成员。这实际上违背了面向对象设计的一条原则：类能够被扩展，但不该该被修改。若是某些变量须要保护，那么能够将其定义在闭包中。

对象字面量只是建立单例的方法之一。也并不是全部的对象字面量都是单例，那些只是用来模仿关联数组或容纳数据的对象字面量显然不是单例。

三、借用闭包建立单例

闭包主要的目地 保护数据

// 命名空间
var BHX = {} ;
BHX.Singleton = (function(){
    // 添加本身的私有成员
    var a1 = true ;
    var a2 = 10  ;
    var f1 = function(){
        alert('f1');
    }
    var f2 = function(){
        alert('f2');
    }               
    // 把块级做用域里的执行结果赋值给个人单例对象
    return {
            attr1: a1 , 
            attr2: a2 ,
            method1 : function(){
                return f1();
            },
            method2 : function(){
                return f2();
            }                       
    } ;
})();

alert(BHX.Singleton.attr1);
BHX.Singleton.method1();

这种单例模式又称模块模式，指的是它能够把一批相关的方法和属性组织为模块并起到划分命名空间的做用。

四、单例模式用于划分命名空间

一、防止全局声明的修改

/*using a namespace*/

var BHX = {};
BHX.Singleton = {
    attr1: true , 
    attr2: 10 ,
    method1 : function(){
        alert('我是方法1');
    },
    method2 : function(){
        alert('我是方法2');
    }               
};
BHX.Singleton.attr1;
var attr1 = false;

这样以来，即便咱们在外面声明了相同的变量，也能在必定程度上防止attr1的被修改。

二、防止其它来源代码的修改

如今网页上的JavaScript代码每每不止用一个来源，什么库代码、广告代码和徽章代码。为了不与本身代码的冲突，能够定义一个包含本身全部代码的对象。

var XGP = {};
XGP.Common = {
    //A singleton with common methods used by all objects and modules
}
XGP.ErrorCodes = {
    //An object literal used to store data
}
XGP.PageHandler = {
    //A singleton with page specific methods and attributes.
}

三、用做专用代码封装

在拥有许多网页的网站中，有些代码是全部网页都要用到的，他们一般被存放在独立的文件中；而有些代码则是某个网页专用的，不会被用到其余地方。最好把这两种代码分别包装在本身的单例对象中。

咱们常常要用Javascript为表单添加功能。出于平稳退化方面的考虑，一般先建立一个不依赖于Javascript的、使用普通提交机制完成任务的纯HTML网页。

XGP.RegPage = {
    FORM_ID: 'reg-form',
    OUTPUT_ID: 'reg-result',

    handleSubmit: function(e){
        e.preventDefault(); //stop the normal form submission

        var data = {};
        var inputs = XGP.RegPage.formEl.getElementByTagName('input');

        for(var i=0, len=inputs.length; i<len; i++){
            data[inputs[i].name] = inputs[i].value;
        }

        XGP.RegPage.sendRegistration(data);
    },
    sendRegistration: function(data){
        //make an xhr request and call displayResult() when response is recieved
        ...
    },
    displayResult: function(response){
        XGP.RegPage.outputEl.innerHTML = response;
    },
    init: function(){
        XGP.RegPage.formEl =$(XGP.RegPage.Form_ID);
        XGP.RegPage.outputEl = $(XGP.RegPage.OUTPUT_ID);
        //hijack the form submission
        addEvent(XGP.RegPage.formEl, 'submit', XGP.RegPage.handleSubmit);
    }
}
//invoke initialization method after the page load
addLoadEvent(XGP.RegPage.init);

五、惰性单例

前面所讲的单例模式又一个共同点：单例对象都是在脚本加载时被建立出来。对于资源密集的或配置开销甚大的单例，更合理的作法是将其实例化推迟到须要使用他的时候。

这种技术就是惰性加载(lazy loading)。

实现步骤以下：

• 1.将全部代码移到constructor方法中

• 2.全权控制调用时机(正是getInstance所要作的)

XGP.lazyLoading = (function(){
    var uniqInstance;

    function constructor(){
        var attr = false;
        function method(){

        }

        return {
            attrp: true,
            methodp: function(){

            }
        }
    }

    return {
        getInstance: function(){
            if(!uniqInstance){
                uniqInstance = constructor();
            }
            return uniqInstance;
        }
    }
})();

六、分支技术

分支是一种用来把浏览器间的差别封装在运行期间进行设置的动态方法中的技术。

// 分支单例 （判断程序的分支 <浏览器差别的检测>）
var Ext = {} ;
var def =  false ;
Ext.More = (function(){
    var objA = {        // 火狐浏览器 内部的一些配置
            attr1:'FF属性1'
            // 属性1 
            // 属性2 
            // 方法1 
            // 方法2
    } ;
    var objB = {        // IE浏览器 内部的一些配置
            attr1:'IE属性1'
            // 属性1 
            // 属性2 
            // 方法1 
            // 方法2 
    } ;
    return (def) ?objA:objB;
})();
alert(Ext.More.attr1);

好比说，若是网站中要频繁使用xhr，每次调用都要再次运行浏览器嗅探代码，这样会严重缺少效率。更有效的作法是在脚本加载时一次性地肯定针对浏览器的代码。这正是分支技术所作的事情。固然，分支技术并不老是更高效的选择，在两个或者多个分支中只有一个分支被用到了，其余分支就占用了内存。

在考虑是否使用分支技术的时候，必须在缩短期和占用更多内存这一利一弊之间权衡一下。

下面利用分支技术实现XHR：

var XHR = (function(){
    var standard = {
        createXhrObj: function(){
            return new XMLHttpRequest();
        }
    };
    var activeXNew = {
        createXhrObj: function(){
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
    };
    var activeXOld = {
        createXhrObj: function(){
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    };

    var testObj;
    try{
        testObj = standard.createXhrObj();
        return testObj;
    }catch(e){
        try{
            testObj = activeXNew.createXhrObj();
            return testObj;
        }catch(e){
            try{
                testObj = activeXOld.createXhrObj();
                return testObj;
            }catch(e){
                throw new Error('No XHR object found in this environment.');
            }
        }
    }
})();

七、单例模式的弊端

了解了这么多关于单例的知识，咱们再来看看它的弊端。

因为单例模式提供的是一种单点访问，因此它有可能致使模块间的强耦合。所以也就不利于单元测试了。

综上，单例仍是留给定义命名空间和实现分支型方法这些用途。

参考：
JChenJS设计模式—–单例模式