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

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

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

3、借用闭包创建单例

闭包主要的目地保护数据

// 命名空间
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();

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

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

1、防止全局声明的修改

/\*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的被修改。

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 ;


### 最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。