札早早

导航

js之 单例模式 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 </head>
  7 <body>
  8 <script>
  9 // 1 ,独立的对象  比如 一个是xiaowang  和一个xiaoli
 10 // 2，小李跟小王通过门铃进行通信
 11 // 3，先看小王家有没有门，如果有 直接通过门铃通讯 didi 没有的话 建门
 12 // 4，单例之间进行通信
 13 // \
 14 // 
 15 // 以下这种单例是需要用到的时候 才去New一个对象 平时开发里 不是这样写
 16 var xiaowang = (function(argument){
 17         var xiaowangjia = function(message){
 18             //建门
 19             this.menling = message;
 20         }
 21         var men;
 22     var info = {
 23         //info是包含对外的东西
 24         sendMessage:function(message){
 25             //这是info里面其中一个方法，接受信息
 26             if (!men) {
 27                 men = new xiaowangjia(message);
 28             };
 29             return men;
 30         }
 31     };
 32     return info;
 33 })();
 34 var xiaoli = {
 35     callXiaowang:function(mes){
 36         //小王家有一个送消息的方法
 37         var _xw=xiaowang.sendMessage(mes);
 38         alert(_xw.menling);
 39         //xiaowang采用闭包 ;此时xiaowang.sendMessage(message)已经被回收了 相当于_xw = null 
 40         _xw = null;//加不加这句话都没事，因为效果都一样，不加也是自动被垃圾回收机制回收掉
 41     }
 42 }
 43 xiaoli.callXiaowang('didi');
 44 
 45 </script>
 46 
 47 <script>
 48     //页面有6个按钮 a b c d e f
 49         // a b c => top
 50         // d e f =>bannerbta
 51         var top = {
 52             init:function(){
 53                 //
 54                 this.render();
 55                 this.bind();
 56             },
 57             //要传递的a
 58             a:4,
 59             render:function(){
 60                 //放所有dom元素
 61                 var me = this;
 62                 me.btna = $('#a');
 63             },
 64             bind:function(){
 65                 //绑定事件
 66                 var me = this;
 67                 me.btna.click(function(){
 68                     //业务逻辑取出去
 69                     me.test(); //此时不能this.test（）； 因为此时的this指的是 按钮
 70                 })
 71             },
 72             test:function(){
 73                 a= 5;
 74             }
 75         }
 76         var banner = {
 77             init:function(){
 78                 //初始化
 79                 this.render();
 80                 this.bind();
 81             },
 82             a:4,
 83             render:function(){
 84                 //放所有dom元素 既是绑定dom元素
 85                 var me = this;
 86                 me.btna = $('#d');
 87             },
 88             bind:function(){
 89                 //绑定事件
 90                 var me = this;
 91                 me.btna.click(function(){
 92                     //业务逻辑取出去
 93                     me.test(); //此时不能this.test（）； 因为此时的this指的是 按钮
 94                 })
 95             },
 96             test:function(){
 97                 
 98                 //当点击的时候
 99                 top.a = 6;
100             }
101         }
102         top.init();
103         banner.init();
104 
105 
106 </script>
107 
108 </body>
109 </html>

 

posted on 2017-06-05 00:41  札早早  阅读(103)  评论(0)    收藏  举报