JavaScript 设计模式之单例模式

一、单例模式概念解读

  1.单例模式概念文字解读

      单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。

  2.单例模式概念拟物化解读

     买房子要先确认是否有门，没有要联系开发商创建。其次，每一个门都有自己的归属，301归属小王，302归属小李，小王小李属于命名空间，但是一栋楼里有多个小王小李，这些全局命名空间里301只归属于一个小王，即，提供一个唯一的访问点来访问该对象。

二、单例模式的作用和注意事项

  模式作用：

    1.模块间通信。

    2.系统中某个类的对象只能存在一个。

    3.保护自己的属性和方法。

  注意事项：

    1.注意this 的使用（谁调用，指向谁）。

    2.闭包容易造成内存泄漏，不需要的赶快删掉。

    3.注意new 的成本。（继承）

三、单例模式的代码实战和总结

 1.一个通俗的例子

<script type="text/javascript">
   //1.独立的对象，建立2个，一个xiaowang，一个xiaoli
   //2.让xiaoli和xiaowang 通过门铃进行通信
   //3.先看一下xiaowang家有没有门，如果有门，直接通过门铃通迅（按didi），如果没有则建门
   //4.两个单例之间开始通信

   var  xiaowang = (function(argument){
           this.doorRing=message;
          };
          var door;
       var info = {
           sengMessage:function(message){
              if (!door) {
                  door=new xiaowangjia(message); //这个单例用的时候才new ,注意new 的成本
              };
              return door;
           }
       };
       return info;
   })();

   var xiaoli = {
           callXiaowang:function(msg){
               var _xw = xiaowang.sengMessage(msg);
               alert(_xw.doorRing);
               _xw = null; //用完了，要把xiaowangjia置成空。等待垃圾回收，闭包问题
           }
   };
   xiaoli.callXiaowang('didi'); //xiaoli 通过按didi发起通信请求
</script>

 2.平时开发的例子

<script type="text/javascript">
    //页面上有6个按钮：a,b,c,d,e,f
    //a,b,c => top 归属到top命名空间
    //d,e,f => banner 归属到banner命名空间
    var top={
      init:function(){
             this.render();
             this.bind();
      },
      a:4,
      render:function(){
          var me = this;
          me.btna=$('#a');
      },
      bind:function(){
        var me = this;
        me.btna.click(function(){
             //业务逻辑取出去
             me.test();
        });
      },
      test:function(){
        a =5;
      }
    }

    var banner={
      init:function(){
             this.render();
             this.bind();
      },
      a:4,
      render:function(){
          var me = this;
          me.btna=$('#d');
      },
      bind:function(){
        var me = this;
        me.btna.click(function(){
             //业务逻辑取出去
             me.test();
        });
      },
      test:function(){
        a =6;
      }
    }
    
    top.init();
    banner.init();

    //使用jQuery 绑定事件
      $('#a').click(function(){
            //执行逻辑
      });
      $('#b').click(function(){
            //执行逻辑
      });
      $('#c').click(function(){
            //执行逻辑
      });
      $('#d').click(function(){
            //执行逻辑
      });
      $('#e').click(function(){
            //执行逻辑
      });
      $('#f').click(function(){
            //执行逻辑
      });
</script>