javascript设计模式与开发实践阅读笔记（4）——单例模式

定义

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

具体来说，就是保证有些对象有且只有一个，比如线程池、全局缓存、浏览器中的window 对象等。在js中单例模式用途很广，比如登录悬浮窗，我希望无论我点击多少次这个浮窗都只会被创建一次，这里就可以用单例模式。

1.实现单例模式

思路：用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象；如果否就创建出那个对象。

 var Singleton = function( name ){  //构造函数
     this.name = name;
     this.instance = null;
 };
 Singleton.prototype.getName = function(){  //构造器原形上添加方法，可以获得对象的name属性
     alert ( this.name );
 };
 Singleton.getInstance = function( name ){
     if ( !this.instance ){       //如果不存在对象实例
         this.instance = new Singleton( name );   //创建对象实例
     }
     return this.instance;   //返回对象实例
 };
 var a = Singleton.getInstance( 'sven1' );
 var b = Singleton.getInstance( 'sven2' );
 alert ( a === b );            // true
 console.log(a.name);       // sven1
 console.log(b.name);       // seven1
 console.log(a.instance);   // null
 console.log(b.instance);   // null
 console.log(window.instance);  // Singleton {name: "sven1", instance: null}

这是书里的例子，从最下面的测试来看，这个例子其实并不太好，比较容易让人误会。我们改造一下，其实是一个意思：

     var Singleton = function( name ){  //构造函数
         this.name = name;
         this.instance = null;     //无效的一个属性
     };
     Singleton.prototype.getName = function(){  //构造器原型上添加方法，可以获得对象的name属性
         alert ( this.name );
     };
     create = function( name ){       //全局创建对象的函数
         if ( !this.sing ){       //这里的this指向的是window，即全局，如果全局不存在sing对象
             this.sing = new Singleton( name );   //创建sing对象
         }
         return this.sing;   //返回sing对象
     };
     var a = create( 'sven1' );
     var b = create( 'sven2' );
     alert ( a === b );            // true
     console.log(a.name);       // sven1
     console.log(b.name);       // seven1
     console.log(a.instance);   // null
     console.log(b.instance);   // null
     console.log(window.sing);  // Singleton {name: "sven1", instance: null}

书里还有第二个创建单例模式的例子，如下：

     var Singleton = function( name ){  //构造函数
         this.name = name;
     };
     Singleton.prototype.getName = function(){   //原型上添加一个方法，可以返回对象的name属性
         alert ( this.name );
     };
     Singleton.getInstance = (function(){    //全局的一个自执行函数，自执行是为了把返回的函数字面量赋给Singleton.getInstance
         var instance = null;                //函数内部变量，但用闭包保存起来
         return function( name ){
             if ( !instance ){   //如果没有创建过对应对象，即函数的这个内部变量没有被赋值
                 instance = new Singleton( name );    //创建对象
             }
             return instance;     //返回对象
         }
     })();

这个例子比上面的要好不少，作者表示之所以用Singleton.getInstance这样的命名，是故意的，故意用这样的方式来创建单例类，来和通过new XXX的方式获取到的对象区分开，创建单例类必须要保存单例，所以需要定义一个全局变量，这种方式其实很不友好。

2.改进单例模式

现在的目标是实现一个“透明”的单例类，利用闭包保存单例，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样，这种方式较上面友好许多。

     var CreateDiv = (function(){   //匿名自执行函数，同时返回一个函数，创造了一个闭包环境
         var instance;        //利用闭包存储的对象实例
         var CreateDiv = function( html ){    //返回的函数
             if ( instance ){       //如果对象存在，返回对象
                 return instance;
             }
             this.html = html;       //不存在就赋值，创建
             this.init();
             return instance = this;   //new的时候返回实例
         };
         CreateDiv.prototype.init = function(){    //原型上绑定的方法
             var div = document.createElement( 'div' );
             div.innerHTML = this.html;
             document.body.appendChild( div );
         };
         return CreateDiv;
     })();

     var a = new CreateDiv( 'sven1' );
     var b = new CreateDiv( 'sven2' );
     alert ( a === b ); // true

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

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

观察这段构造函数，它实际上做了两件事，第一是创建对象和执行初始化init方法，第二是保证只有一个对象。这其实是种不好的做法，应该尽量遵循“单一职责原则”，假设我们某天需要利用这个类，在页面中创建千千万万的div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那我们必须得改写CreateDiv 构造函数，把控制创建唯一对象的那一段去掉，这种修改会给我们带来不必要的烦恼。

3.用代理实现单例模式

通过引入代理类的方式，来解决上面提到的问题。
在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 );
     };

接下来引入代理类SingletonCreateDiv：

     var SingletonCreateDiv = (function(){
         var instance;
         return function( html ){
             if ( !instance ){
                 instance = new CreateDiv( html );
             }
             return instance;
         }
     })();
     var a = new SingletonCreateDiv( 'sven1' );
     var b = new SingletonCreateDiv( 'sven2' );
     alert ( a === b );     //true

通过引入代理类的方式，完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理类SingletonCreateDiv中。这样一来，CreateDiv就变成了一个普通的类，它跟SingletonCreateDiv组合起来可以达到单例模式的效果。本例是缓存代理的应用之一，这样写的好处是毋庸置疑的。

4.JavaScript中的单例模式

前面几种单例模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从“类”中创建而来。在以类为中心的语言中，这是很自然的做法，对象总是从类中创建而来的。而在JavaScript 中创建对象的方法非常简单，既然我们只需要一个“唯一”的对象，为什么要为它先创建一个“类”呢？这无异于穿棉衣洗澡，传统的单例模式实现在JavaScript中并不适用。

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

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

var a = {};

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

但这样明显会污染全局的命名空间，有这样几种方式可以相对降低其它全局变量带来的命名污染：

　　(1)使用命名空间

　　变量放到了命名空间内，成为了命名空间的属性

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

　　(2)使用闭包封装私有变量

　　这种方法把一些变量封装在闭包的内部，只暴露一些接口跟外界通信。

     var user = (function(){
         var __name = 'sven',
         __age = 29;
         return {
             getUserInfo: function(){
                 return __name + '-' + __age;
             }
         }
     })();

5.惰性单例

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

首先我们想要创建一个悬浮窗用于登录，被一个点击事件触发，且悬浮窗唯一：

     var loginLayer = (function(){     //loginLayer就是单例对象，这里没有用类的方式创建，而是直接给了一个全局对象
         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';
     };

这次达到了惰性的目的，但是失去了单例效果，每次点击都会创建一个悬浮窗。我们可以用一个变量来判断是否已经创建过登录浮窗：

     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';
     };

这次代码虽然实现了功能，但是又违反了之前提过的“单一职责原则”，我们需要把管理单例的代码抽离出来：

     var getSingle = function( fn ){   //管理单例，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 loginLayer = createSingleLoginLayer();    //调用创建单例的函数
         loginLayer.style.display = 'block';
     };

利用单例模式还可以完成事件代理，只绑定一次事件

     var bindEvent = getSingle(function(){
         document.getElementById( 'div1' ).onclick = function(e){
             alert ( 'e.target' );
         }
         return true;  //单例需要接收一个返回值
     });
     var render = function(){
         console.log( '开始渲染列表' );
         bindEvent();
     };

     render();   //这里即使运行了三次，但只绑定了一次，不会浪费性能
     render();
     render();

总结

单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。将管理单例和创建对象的方法分开是种很好的思路。