JavaScript设计模式 Item 6 --单例模式Singleton_js单例模式的生命周期

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


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


现在网页上的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.
}

**3、用作专用代码封装**


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


我们经常要用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);

### 5、惰性单例


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


这种技术就是惰性加载(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;
    }
}

})();

### 6、分支技术


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

// 分支单例 （判断程序的分支 <浏览器差异的检测>）
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.');
        }
    }
}

})();

### 7、单例模式的弊端



###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/c3e40e298aae074db85b36a69497f068.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/efe48faee371bdbcf11c68760d473918.webp?x-oss-process=image/format,png)

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中...(img-9NTSPbUd-1720093631691)]

[外链图片转存中...(img-cJMH21nn-1720093631693)]