js設計模式(3)---橋接模式

0.前言                                                                                                 

   看設計模式比較痛苦，一則是自己經驗尚淺，不能體會到使用這些設計模式的益處；二則是不能很好把握使用這些設計模式的時機。所以這一部分看得斷斷續續，拖拖拉拉，為了了卻這快心病，決定最近一口氣看完幾種常見的設計模式。今天就從橋接模式開始吧。

1.使用情況                                                                     

   最常用於事件監控上，也通過橋接聯接多個類

   1.1、事件監控   

//錯誤的方式
 　　//這個API根據事件監聽器回調函數的工作機制，事件對象被作為參數傳遞給這個函數。本例中並沒有使用這個參數，而只是從this對象獲取ID。
 　　addEvent(element,'click',getBeerById);
 　　function(e){
    　　var id =this.id;
    　　asyncRequest('GET','beer.url?id='+ id,function(resp){
       　　//Callback response
      　　 console.log('Requested Beer: '+ resp.responseText);
    　　});
 　　}
 
 　　//好的方式
 　　//從邏輯上分析，把id傳給getBeerById函數式合情理的，且回應結果總是通過一個毀掉函數返回。這么理解，我們現在做的是針對接口而不是實現進行編程，用橋梁模式把抽象隔離開來。
 　　function getBeerById(id,callback){
    　　asyncRequest('GET','beer.url?id='+ id,function(resp){
       　　callback(resp.responseText)
    　　});
 　　}
 　　addEvent(element,'click',getBeerByIdBridge);
 　　function getBeerByIdBridge(e){
    　　getBeerById(this.id,function(beer){
       　　console.log('Requested Beer: '+ beer);
    　　});
 　　}

      1.2、聯接多個類     

var  Class1 = function(a,b,c){
       this.a = a;
       this.b = b;
       this.c = c;  
}
var Class2 = function(d){
      this.d = d;  
}

var BridgeClass = function(a,b,c,d){
      this.one = new Class1(a,b,c);
      this.two = new Class2(d);
}
這里使用橋接模式是為了讓Class1、Class2能夠獨立於BridgeClass而發生改變。

2.橋接的利與弊                                                                                        

   2.1利：弱化了代碼之間的耦合，將抽象和其實現分離，便於二者獨立變化、讓API更加健壯，有利於分層，提高組件的模塊化程度；提高可拓性。

   2.3弊：增加開發成本，在性能方面可能會有所降低。

3.個人理解                                                                  

   1.橋接模式可以將抽象和其實現分離，方便他們獨立變化；

   2.主要應用情況是事件監聽，將事件處理函數的抽象部分與實現部分分離,也就是抽像部分只是提供一個接口，具體的實現由橋接函數來實現；

   3.好處：弱化了代碼之間的耦合，有利於代碼拓展

   4.舉例：     

var  forEach = function（arr,fn）{
     var result = [];
      for(var i=0;len= arr.length){
            result.push(fn.call(this,i,arr[i]));
       }
       return result;
}    

function  deal(){
　　var arr = [1,2,3,4,5];
   var b = forEach(arr,function(i,n){
       return n*n;
   }) 
}