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

#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:需要增加事件的對(duì)象* type:事件名稱* fn:執(zhí)行事件的函數(shù)* */function addEvent(obj,type,fn){//addEvent：為某個(gè)文檔節(jié)點(diǎn)增加事件的方法 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é)：該種方式對(duì)于單元測(cè)試很難進(jìn)行

改進(jìn)為用簡單的橋梁模式來解決

#1，后臺(tái)中的api

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

#2,橋梁

//定義一個(gè)橋梁叫抽象和實(shí)現(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)層可以靈活的變動(dòng)。

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

//多個(gè)類的連接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); }//目的：兩個(gè)類能獨(dú)立的修改，而門面的意義在于調(diào)用方便

橋梁模式：

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

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

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