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

#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函數(shù)

/*obj:需要增加事件的對象* type:事件名稱* fn:執(zhí)行事件的函數(shù)* */function addEvent(obj,type,fn){//addEvent：為某個文檔節(jié)點增加事件的方法 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) }}

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

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

#1，后臺中的api

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

#2,橋梁

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

總結(jié)：這種做法使API和展現(xiàn)層完全分離，API和展現(xiàn)層可以靈活的變動。

//特權(quán)函數(shù)var privilege=function () { //信息全封閉，內(nèi)部業(yè)務(wù)邏輯復(fù)雜，做成一個特權(quán)函數(shù)，使調(diào)用方便 var complex=function (x,y) { //復(fù)雜的數(shù)學(xué)處理 } 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); }//目的：兩個類能獨立的修改，而門面的意義在于調(diào)用方便

橋梁模式：

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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