本文實例講述了JavaScript設計模式--橋梁模式引入操作。分享給大家供大家參考，具體如下：

#1，利用頁面的button來選擇寵物的例子（思路）

button.addEvent(element,'click',getPetByBame); function getPetByBame(e){ var id = this.id; asyncRquest('GET',’pet.action?id=’+id,function(pet){ consols.log('request pet'+pet.resopnseText) }) }

#2，addEvent函數

/*obj:需要增加事件的對象* type:事件名稱* fn:執行事件的函數* */function addEvent(obj,type,fn){//addEvent：為某個文檔節點增加事件的方法 if(obj.addEventListener){//Mozilla中： obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE中： obj['e'+type+fn] = fn; obj[type+fn] = function(){ obj['e'+type+fn]() } obj.attachEvent('on'+type,fn) }}

總結：該種方式對于單元測試很難進行

改進為用簡單的橋梁模式來解決

#1，后臺中的api

function getPetByBame(id,callBack){ sayncRquest('GET',’url?id=’+id,function(pet){ callBack(pet) })

#2,橋梁

//定義一個橋梁叫抽象和實現相互聯系在一起 addEvent(element,'click',getPetByNameBridge) function getPetByNameBridge(){ getPetByBame(this.id,function(pet){ consols.log('request pet'+pet.resopnseText); }) }

總結：這種做法使API和展現層完全分離，API和展現層可以靈活的變動。

//特權函數var privilege=function () { //信息全封閉，內部業務邏輯復雜，做成一個特權函數，使調用方便 var complex=function (x,y) { //復雜的數學處理 } this.bridge=function () { //提供公共接口，返回一個單體 return { bridgeAdd:function () { //處理前 complex(1,2); //處理后 } } }}（3）多個類的連接

//多個類的連接var class1=function (a,b) { this.a=a; this.b=b;} var class2=function (e) { this.e=e; } //橋梁的連接 var bridgeClass=function () { this.one=new Class1(1,2); this.two=new Class1(1); }//目的：兩個類能獨立的修改，而門面的意義在于調用方便

橋梁模式：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。