js设计模式-桥接模式

桥接模式定义：桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦，使得二者可以独立地变化"。这句话有三个关键词，也就是抽象化、实现化和脱耦。

最简单的桥接模式例子：事件监听器

addEvent(element,"click",getResultByIdBridge);
    function getResultByIdBridge(e){
        getById(this.id, function(result){
            //TODO: this is operate result
        });
    }

桥接模式复杂例子：构建XHR连接队列

 var asyncRequest = (function(){

     function handleReadyState(o,callback){
         var poll = window.setInterval(function(){
             if(o && o.readyState ==4){
                 window.clearInterval(poll);
                 if(callback) callback(o);
             }
         },50);
     }

     var getXHR = function(){
         var http;
         try{
             http = new XMLHttpRequest();
             getXHR = function(){
                 return new XMLHttpRequest();
             };
         }catch(e){
             var msxml = ["MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
             for(var i =0, len = msxml.length;i <len;i++){
                 try{
                     http = new ActiveXObject(msxml[i]);
                     getXHR = function(){
                         return new ActiveXObject(msxml[i]);
                     };
                     break;
                 }catch(e){}
             }
         }
         return http;
     }

     return function(method,url,callback,postData){
         var http = getXHR();
         console.log("send url is:" + url);
         http.open(method,url,true);
         handleReadyState(http,callback);
         http.send(postData || null);
     }
 })();

 Function.prototype.method = function(name,fn){
     this.prototype[name] = fn;
     return this;
 }

 if(!Array.prototype.forEach){
     Array.method("forEach",function(fn,thisObj){
         var scope = thisObj || window;
         for(var i = 0, len = this.length;i<len;i++){
             fn.call(scope,this[i],i,this);
         }
     })
 }

 if(!Array.prototype.filter){
     Array.method("filter",function(fn,thisObj){
         var scope = thisObj || window;
         var a  = [];
         for(var i = 0 , len = this.length;i<len;i++){
             if(fn.call(scope,this[i],i,this)){
                 a.push(this[i]);
             }
         }
         return a;
     })
 }

 /******************************************/
 window.DED = window.DED || {};
 DED.util = DED.util || {};
 DED.util.Observer = function(){
     this.fns = [];
 }
 DED.util.Observer.prototype = {
     subscribe:function(fn){ //签署
         this.fns.push(fn);
     },
     unsubscribe:function(fn){
         this.fns = this.fns.filter(function(item){
             if(item != fn){
                 return item;
             }
         });
     },
     fire:function(o){
         this.fns.forEach(function(item){
             item(o);
         });
     }
 }

 DED.Queue = function(){
     this.queue = [];
     this.onComplete = new DED.util.Observer();
     this.onFailure = new DED.util.Observer();
     this.onFlush = new DED.util.Observer();

     this.retryCount = 3;
     this.currentRetry = 0;
     this.paused = false;
     this.timeout = 5000;
     this.conn = {};
     this.timer = {};
 };

 DED.Queue.method("flush",function(){
     if(!this.queue.length >0){
         return ;
     }
     if(this.paused){
         this.paused = false;
         return;
     }

     var that = this;
     this.currentRetry++;
     var abort = function(){
         that.conn.abort();
         if(that.currentRetry == that.retryCount){
             that.onFailure.fire();
             that.currentRetry = 0;
         }else{
             that.flush();
         }
     };

     this.timer = window.setTimeout(abort,this.timeout);
     var callback = function(o){
         window.clearTimeout(that.timer);
         that.currentRetry = 0;
         that.queue.shift();
         that.onFlush.fire(o.responseText);
         if(that.queue.length == 0){
             that.onComplete.fire();
             return;
         }
         that.flush();
     };

     this.conn = asyncRequest(this.queue[0]["method"],this.queue[0]["url"],callback,this.queue[0]["params"]);
     }).
     method("setRetryCount",function(count){
         this.retryCount = count;
     }).
     method("setTimeout",function(time){
         this.timeout = time;
     }).
     method("add",function(o){
         this.queue.push(o);
     }).
     method("pause",function(){
         this.paused = true;
     }).
     method("dequeue",function(){
         this.queue.pop();
     }).
     method("clear",function(){
         this.queue = [];
     });

对应的html

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>
         <style type="text/css">
             body{font:100% georgia,times,serif}
             h1,h2{font-weight: normal;}
             #queue-items{height:1.5rem;}
             #add-stuff{padding:0.5rem; background:#ddd; border:1px solid #bbb;}
             #result-area{padding:0.5rem; border: 1px solid #bbb;}
         </style>
     </head>
     <body id="exmapl">
         <div id="doc">
             <h1>Ajax Conection Queue</h1>
             <div id="queue-items"></div>
             <div id="add-stuff">
                 <h2>Add Requests to Queue</h2>
                 <ul id="adders">
                     <li><a href="#" id="action-01">add 01 to Queue</a></li>
                     <li><a href="#" id="action-02">add 02 to Queue</a></li>
                     <li><a href="#" id="action-03">add 03 to Queue</a></li>
                     <li><a href="#" id="action-04">add 04 to Queue</a></li>
                 </ul>
             </div>
             <h2>oTther Queue actions</h2>
             <ul id="items">
                 <li><a href="#" id="flush">Flush</a></li>
                 <li><a href="#" id="dequeue">dequeue</a></li>
                 <li><a href="#" id="pause">pause</a></li>
                 <li><a href="#" id="clear">clear</a></li>
             </ul>

             <div id="result-area">
                 <h2>Results:</h2>
                 <div id="results"></div>
             </div>
         </div>
     </body>
 </html>
 <script type="text/javascript" src="Bridge.js"></script>
 <script>
     window.onload = function(){
         var q = new DED.Queue();
         q.setRetryCount(5);
         q.setTimeout(3000);

         var items = document.getElementById("items");
         var queue = document.getElementById("queue-items");
         var requests = [];
         q.onFlush.subscribe(function(data){
             results.innerHTML = data;
             requests.shift();
             queue.innerHTML = requests.toString();
         });
         q.onFailure.subscribe(function(){
             results.innerHTML += "<span style='color:red;'>Connection error</span>";
         });

         q.onComplete.subscribe(function(){
             results.innerHTML += "<span style='color:green;'>Completed!</span>";
         });

         var actionDispatcher = function(element){
             switch(element){
                 case "flush":
                     q.flush();
                     break;
                 case "dequeue":
                     requests.pop();
                     queue.innerHTML = requests.toString();
                     break;
                 case "pause":
                     q.pause();
                     break;
                 case "clear":
                     q.clear();
                     requests = [];
                     queue.innerHTML = "";
                     break;
             }
         };

         var addRequest = function(request){
             var data = request.split("-")[1];
             q.add({
                 method:"GET",
                 url:"http://127.0.0.1:8020/WS_WEB/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/js/ajax.json?data=" + data,
                 params:null
             });
             requests.push(data);
             queue.innerHTML = requests.toString();
         };

         items.onclick = function(e){
             var e = e || window.event;
             var src = e.target || e.srcElement;
             try{
                 e.preventDefault();
             }catch(e){
                 e.returnValue = false;
             }
             if(src.id){
                 actionDispatcher(src.id);
             }
         };

         var adders = document.getElementById("adders");
         adders.onclick = function(){
             var e = e || window.event;
             var src = e.target || e.srcElement;
             if(e.preventDefault){
                 e.preventDefault();
             }else{
                 e.returnValue = false;
             }
             if(src.id)addRequest(src.id);
         }

     }

 </script>