本文实例讲述了JavaScript设计模式--桥梁模式引入操作。分享给大家供大家参考，具体如下：<br>
1.使用情况<br>
（1）事件的监控<br>
#1，利用页面的button来选择宠物的例子（思路）<br>
<pre class="brush:js">
button.addEvent(element,"click",getPetByBame);<br>
function getPetByBame(e){<br>
var id = this.id;<br>
asyncRquest("GET",'pet.action?id='+id,function(pet){<br>
consols.log("request pet"+pet.resopnseText)<br>
})<br>
}</pre>
#2，addEvent函数<br>
<pre class="brush:js">
/*obj:需要增加事件的对象<br>
* type:事件名称<br>
* fn:执行事件的函数<br>
* */<br>
function addEvent(obj,type,fn){//addEvent：为某个文档节点增加事件的方法<br>
if(obj.addEventListener){//Mozilla中：<br>
obj.addEventListener(type,fn,false);<br>
}else if(obj.attachEvent){//IE中：<br>
obj["e"+type+fn] = fn;<br>
obj[type+fn] = function(){<br>
obj["e"+type+fn]()<br>
}<br>
obj.attachEvent("on"+type,fn)<br>
}<br>
}</pre>
总结：该种方式对于单元测试很难进行<br>
改进为用简单的桥梁模式来解决<br>
#1，后台中的api<br>
<pre class="brush:js">
function getPetByBame(id,callBack){<br>
sayncRquest("GET",'url?id='+id,function(pet){<br>
callBack(pet)<br>
})</pre>
#2,桥梁<br>
<pre class="brush:js">
//定义一个桥梁叫抽象和实现相互联系在一起<br>
addEvent(element,"click",getPetByNameBridge)<br>
function getPetByNameBridge(){<br>
getPetByBame(this.id,function(pet){<br>
consols.log("request pet"+pet.resopnseText);<br>
})<br>
}</pre>
总结：这种做法使API和展现层完全分离，API和展现层可以灵活的变动。<br>
（2）特权函数<br>
<pre class="brush:js">
//特权函数<br>
var privilege=function () {<br>
//信息全封闭，内部业务逻辑复杂，做成一个特权函数，使调用方便<br>
var complex=function (x,y) {<br>
//复杂的数学处理<br>
}<br>
this.bridge=function () { //提供公共接口，返回一个单体<br>
return {<br>
bridgeAdd:function () {<br>
//处理前<br>
complex(1,2);<br>
//处理后<br>
}<br>
}<br>
}<br>
}</pre>
（3）多个类的连接<br>
<pre class="brush:js">
//多个类的连接<br>
var class1=function (a,b) {<br>
this.a=a;<br>
this.b=b;<br>
}<br>
var class2=function (e) {<br>
this.e=e;<br>
}<br>
//桥梁的连接<br>
var bridgeClass=function () {<br>
this.one=new Class1(1,2);<br>
this.two=new Class1(1);<br>
}<br>
//目的：两个类能独立的修改，而门面的意义在于调用方便</pre>
