返回列表

JS模块通信功能

默认分类 2011-05-25 07:17:39

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>Untitled 1</title>  
  7. <script type="text/javascript">  
  8. <!--   
  9. function isArray(a){    return Object.prototype.toString.apply(a) === '[object Array]';}   
  10. if(typeof console == "undefined") window.console={log:function(str){var console=document.getElementById('console');if(!!console)consoleconsole.innerHTML=console.innerHTML+str+"<br/>";}}   
  11.   
  12.        
  13.   
  14. DOM = {getElementById:function(i){return document.getElementById(i);}}   
  15.   
  16. MM = ModuleManager = {   
  17.     id:Math.random(),   
  18.     Modules:{},   
  19.     Listners:{},//Listners["id"+id+evt]   
  20.     get:function(id){return Modules[id]},   
  21.     push:function(module){   
  22.         this.Modules[module.id] = module;   
  23.     },   
  24.     //监听事件   
  25.     //ModuleB.addEventListener('doit',ModuleA);   
  26.     //如果ModuleA发生了doit,请通知我[ModuleB]   
  27.     addEventListener:function(receiver,evt,sender){   
  28.         this.Listners[receiver.id+this.id.toString()+evt] ={"module":receiver,listenEvent:evt,sender:sender};   
  29.     },   
  30.     //触发事件   
  31.     //ModuleA.sendEvent('doit',ModuleB);   
  32.     //我[ModuleA]刚刚发生了doit,请告诉ModuleB   
  33.     receiveEvent:function(sender,evt,receiver){   
  34.         //sender发生了evt   
  35.         var i,j,k,sender,to,listenEvent,listner,meInFromList=false,toInMeList=false;   
  36.            
  37.         for(i in this.Listners){   
  38.             listner = this.Listners[i];   
  39.                            
  40.             if(!listner.listenEvent||listner.listenEvent!=evt||   
  41.               (!!listner.module&&!(listner.module instanceof Module)))   
  42.             {console.log('Module ['+listner.module.id+'] is not listen "'+evt+'".');continue;}             
  43.             //检测sender是不是在listner的fromList中   
  44.             if(listner.sender!==undefined&&!listner.sender[sender.id]){console.log('Module ['+sender.id+'] is not in module ['+listner.module.id+'] listen list.');continue;}   
  45.             //listner.module不在receiver之列   
  46.             if(receiver!==undefined&&!receiver[listner.module.id]){console.log('Module ['+listner.module.id+'] is not in module ['+sender.id+'] receive list.');continue;}   
  47.                
  48.             if(listner.module.needinit&&!listner.module.inited)   
  49.                 console.log("Module [" + listner.module.id + "] is not inited.If it not need init please set it's property {needinit:flase}");   
  50.             else   
  51.                 listner.module.fireEvent(evt);   
  52.         }   
  53.     }   
  54.   
  55. }   
  56.   
  57. Module=function(arg){   
  58. /* arg:{id:string,element:HTMLElement,init:funtion}   
  59. */   
  60.     var _this=this;   
  61.     if(this.needinit===undefined)    
  62.         this.needinit=true;   
  63.     if(this.inited===undefined)    
  64.         this.inited=false;   
  65.        
  66.     //触发事件   
  67.     //ModuleA.sendEvent('doit',ModuleB);   
  68.     //ModuleA刚刚发生了doit,请告诉[ModuleB]   
  69.     arg.sendEvent=function(evt,target){   
  70.         var i,j,k,receivers;   
  71.         if(target!==undefined){            
  72.             if(Object.prototype.toString.apply(target)==='[object Array]'){   
  73.                 for(i in target){   
  74.                     if(target[i] instanceof Module){   
  75.                         if(receivers==undefined) receivers={};   
  76.                         receivers[target[i].id]=target[i];   
  77.                     }   
  78.                 }   
  79.             }   
  80.             else if(target instanceof Module){receivers={};receivers[target.id]=target;}   
  81.             else console.log("Sender is not module.");   
  82.         }   
  83.            
  84.         MM.receiveEvent(_this,evt,receivers);   
  85.     }   
  86.     //监听事件   
  87.     //ModuleB.addEventListener('doit',ModuleA);   
  88.     //如果ModuleA发生了doit,请通知我[ModuleB]   
  89.     arg.addEventListener=function(evt,source){   
  90.         var i,j,k,senders;   
  91.         if(source!==undefined){            
  92.             if(Object.prototype.toString.apply(source)==='[object Array]'){   
  93.                 for(i in source){   
  94.                     if(source[i] instanceof Module){   
  95.                         if(senders==undefined) senders={};   
  96.                         senders[source[i].id]=source[i];   
  97.                     }   
  98.                 }   
  99.             }   
  100.             else if(source instanceof Module){senders={};senders[source.id]=source;}   
  101.             else console.log("Sender is not module.");   
  102.         }   
  103.            
  104.         MM.addEventListener(_this,evt,senders);   
  105.     }   
  106.     if(!!arg.fireEvent)   
  107.         this.fireEvent=function(evt){arg.fireEvent(evt)}   
  108.     else this.fireEvent=function(evt){console.log('Module ['+this.id+'] not set fireEvent().');};   
  109.        
  110.        
  111.     for(var i in arg){this[i] = arg[i];}   
  112.        
  113.     if(!!arg.init) {this.init=function(){this.inited=true;arg.init.call(this);};}   
  114.     else {this.init=function(){this.inited=true;};}   
  115.        
  116.     this.initObj = arg;   
  117.     arg.module=this;   
  118.     ModuleManager.push(this);   
  119. }   
  120.   
  121.   
  122. //////////////////////////////////////////////////////////////////////////////////////////   
  123.   
  124. var ModuleA = new Module({   
  125.     id:"a",   
  126.     init:function(){   
  127.         this.element = DOM.getElementById(this.id);   
  128.         this.element.onclick=function(){   
  129.             ModuleC.addEventListener('Adoit');   
  130.   
  131.             ModuleA.sendEvent('Adoit',[ModuleA,ModuleC]);   
  132.                
  133.         };   
  134.         this.addEventListener('Adoit');   
  135.     }   
  136. });   
  137. var ModuleB = new Module({   
  138.     id:"b",   
  139.     init:function(){   
  140.         this.element = DOM.getElementById(this.id);   
  141.         this.addEventListener('Adoit');   
  142.         this.element.onclick=function(){   
  143.             ModuleB.sendEvent('Adoit');   
  144.         };   
  145.     },   
  146.     fireEvent:function(evt){   
  147.         this.element.innerHTML="fire";   
  148.     }   
  149.   
  150. });   
  151. var ModuleC = new Module({   
  152.     id:"c",   
  153.     init:function(){   
  154.         this.element = DOM.getElementById(this.id);   
  155.         this.addEventListener('Adoit');   
  156.         this.element.onclick=function(){   
  157.             this.sendEvent('Bdoit');   
  158.         };   
  159.   
  160.   
  161.     },   
  162.     fireEvent:function(evt){   
  163.         this.element.innerHTML="fire";   
  164.     }   
  165.   
  166. });   
  167.   
  168.   
  169. window.onload=function(){   
  170.     //MM.init([ModuleA,ModuleB,ModuleC]);   
  171.        
  172.     ModuleA.init();   
  173.     ModuleB.init();   
  174.     //ModuleC.init();   
  175.   
  176. }   
  177.   
  178.   
  179.   
  180.   
  181.   
  182.   
  183.      
  184.   
  185.   
  186. //-->  
  187. </script>  
  188. </head>  
  189.   
  190. <body>  
  191. <div id="a">aaaaa</div>  
  192. <div id="b">bbbb</div>  
  193. <div id="c">cccc</div>  
  194.   
  195. <div id="console" style="font-style:italic;">Console<br/></div>  
  196. </body>  
  197.   
  198. </html>