js设计模式-桥接模式

Posted 2020-07-03 腾格里

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

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

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

 

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

  1 var asyncRequest = (function(){
  2     
  3     function handleReadyState(o,callback){
  4         var poll = window.setInterval(function(){
  5             if(o && o.readyState ==4){
  6                 window.clearInterval(poll);
  7                 if(callback) callback(o);
  8             }
  9         },50);
 10     }
 11     
 12     var getXHR = function(){
 13         var http;
 14         try{
 15             http = new XMLHttpRequest();
 16             getXHR = function(){
 17                 return new XMLHttpRequest();
 18             };
 19         }catch(e){
 20             var msxml = ["MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
 21             for(var i =0, len = msxml.length;i <len;i++){
 22                 try{
 23                     http = new ActiveXObject(msxml[i]);
 24                     getXHR = function(){
 25                         return new ActiveXObject(msxml[i]);
 26                     };
 27                     break;
 28                 }catch(e){}
 29             }
 30         }
 31         return http;
 32     }
 33     
 34     return function(method,url,callback,postData){
 35         var http = getXHR();
 36         console.log("send url is:" + url);
 37         http.open(method,url,true);
 38         handleReadyState(http,callback);
 39         http.send(postData || null);
 40     }
 41 })();
 42 
 43 Function.prototype.method = function(name,fn){
 44     this.prototype[name] = fn;
 45     return this;
 46 }
 47 
 48 if(!Array.prototype.forEach){
 49     Array.method("forEach",function(fn,thisObj){
 50         var scope = thisObj || window;
 51         for(var i = 0, len = this.length;i<len;i++){
 52             fn.call(scope,this[i],i,this);
 53         }
 54     })
 55 }
 56 
 57 if(!Array.prototype.filter){
 58     Array.method("filter",function(fn,thisObj){
 59         var scope = thisObj || window;
 60         var a  = [];
 61         for(var i = 0 , len = this.length;i<len;i++){
 62             if(fn.call(scope,this[i],i,this)){
 63                 a.push(this[i]);
 64             }
 65         }
 66         return a;
 67     })
 68 }
 69 
 70 
 71 /******************************************/
 72 window.DED = window.DED || {};
 73 DED.util = DED.util || {};
 74 DED.util.Observer = function(){
 75     this.fns = [];
 76 }
 77 DED.util.Observer.prototype = {
 78     subscribe:function(fn){ //签署
 79         this.fns.push(fn);
 80     },
 81     unsubscribe:function(fn){
 82         this.fns = this.fns.filter(function(item){
 83             if(item != fn){
 84                 return item;
 85             }
 86         });
 87     },
 88     fire:function(o){
 89         this.fns.forEach(function(item){
 90             item(o);
 91         });
 92     }
 93 }
 94 
 95 DED.Queue = function(){
 96     this.queue = [];
 97     this.onComplete = new DED.util.Observer();
 98     this.onFailure = new DED.util.Observer();
 99     this.onFlush = new DED.util.Observer();
100     
101     this.retryCount = 3;
102     this.currentRetry = 0;
103     this.paused = false;
104     this.timeout = 5000;
105     this.conn = {};
106     this.timer = {};
107 };
108 
109 DED.Queue.method("flush",function(){
110     if(!this.queue.length >0){
111         return ;
112     }
113     if(this.paused){
114         this.paused = false;
115         return;
116     }
117     
118     var that = this;
119     this.currentRetry++;
120     var abort = function(){
121         that.conn.abort();
122         if(that.currentRetry == that.retryCount){
123             that.onFailure.fire();
124             that.currentRetry = 0;
125         }else{
126             that.flush();
127         }
128     };
129     
130     this.timer = window.setTimeout(abort,this.timeout);
131     var callback = function(o){
132         window.clearTimeout(that.timer);
133         that.currentRetry = 0;
134         that.queue.shift();
135         that.onFlush.fire(o.responseText);
136         if(that.queue.length == 0){
137             that.onComplete.fire();
138             return;
139         }
140         that.flush();
141     };
142     
143     this.conn = asyncRequest(this.queue[0]["method"],this.queue[0]["url"],callback,this.queue[0]["params"]);
144     }).
145     method("setRetryCount",function(count){
146         this.retryCount = count;
147     }).
148     method("setTimeout",function(time){
149         this.timeout = time;
150     }).
151     method("add",function(o){
152         this.queue.push(o);
153     }).
154     method("pause",function(){
155         this.paused = true;
156     }).
157     method("dequeue",function(){
158         this.queue.pop();
159     }).
160     method("clear",function(){
161         this.queue = [];
162     });

View Code

 

对应的html

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             body{font:100% georgia,times,serif}
  8             h1,h2{font-weight: normal;}
  9             #queue-items{height:1.5rem;}
 10             #add-stuff{padding:0.5rem; background:#ddd; border:1px solid #bbb;}
 11             #result-area{padding:0.5rem; border: 1px solid #bbb;}
 12         </style>
 13     </head>
 14     <body id="exmapl">
 15         <div id="doc">
 16             <h1>Ajax Conection Queue</h1>
 17             <div id="queue-items"></div>
 18             <div id="add-stuff">
 19                 <h2>Add Requests to Queue</h2>
 20                 <ul id="adders">
 21                     <li><a href="#" id="action-01">add 01 to Queue</a></li>
 22                     <li><a href="#" id="action-02">add 02 to Queue</a></li>
 23                     <li><a href="#" id="action-03">add 03 to Queue</a></li>
 24                     <li><a href="#" id="action-04">add 04 to Queue</a></li>
 25                 </ul>
 26             </div>
 27             <h2>oTther Queue actions</h2>
 28             <ul id="items">
 29                 <li><a href="#" id="flush">Flush</a></li>
 30                 <li><a href="#" id="dequeue">dequeue</a></li>
 31                 <li><a href="#" id="pause">pause</a></li>
 32                 <li><a href="#" id="clear">clear</a></li>
 33             </ul>
 34             
 35             <div id="result-area">
 36                 <h2>Results:</h2>
 37                 <div id="results"></div>
 38             </div>
 39         </div>
 40     </body>
 41 </html>
 42 <script type="text/javascript" src="Bridge.js"></script>
 43 <script>
 44     window.onload = function(){
 45         var q = new DED.Queue();
 46         q.setRetryCount(5);
 47         q.setTimeout(3000);
 48         
 49         
 50         var items = document.getElementById("items");
 51         var queue = document.getElementById("queue-items");
 52         var requests = [];
 53         q.onFlush.subscribe(function(data){
 54             results.innerHTML = data;
 55             requests.shift();
 56             queue.innerHTML = requests.toString();
 57         });
 58         q.onFailure.subscribe(function(){
 59             results.innerHTML += "<span style=‘color:red;‘>Connection error</span>";
 60         });
 61         
 62         q.onComplete.subscribe(function(){
 63             results.innerHTML += "<span style=‘color:green;‘>Completed!</span>";
 64         });
 65         
 66         var actionDispatcher = function(element){
 67             switch(element){
 68                 case "flush":
 69                     q.flush();
 70                     break;
 71                 case "dequeue":
 72                     requests.pop();
 73                     queue.innerHTML = requests.toString();
 74                     break;
 75                 case "pause":
 76                     q.pause();
 77                     break;
 78                 case "clear":
 79                     q.clear();
 80                     requests = [];
 81                     queue.innerHTML = "";
 82                     break;
 83             }
 84         };
 85         
 86         var addRequest = function(request){
 87             var data = request.split("-")[1];
 88             q.add({
 89                 method:"GET",
 90                 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,
 91                 params:null
 92             });
 93             requests.push(data);
 94             queue.innerHTML = requests.toString();
 95         };
 96         
 97         items.onclick = function(e){
 98             var e = e || window.event;
 99             var src = e.target || e.srcElement;
100             try{
101                 e.preventDefault();
102             }catch(e){
103                 e.returnValue = false;
104             }
105             if(src.id){
106                 actionDispatcher(src.id);
107             }
108         };
109         
110         var adders = document.getElementById("adders");
111         adders.onclick = function(){
112             var e = e || window.event;
113             var src = e.target || e.srcElement;
114             if(e.preventDefault){
115                 e.preventDefault();
116             }else{
117                 e.returnValue = false;
118             }
119             if(src.id)addRequest(src.id);
120         }
121         
122     }
123     
124 </script>