桥接模式是一种既能把两个对象连接在一起,又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来,同时又允许他们各自独立变化。
主要作用表现为将抽象与其实现隔离开来,以便二者独立化。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
<script type=text/javascript charset=utf-8 src=../jquery/jquery-1.8.0.min.js ></script>
<script>
// 桥接模式: 把2部分分离开来,使他们可以完全独立使用,解耦,既能单独变化又能组织在一起。
//$( function(){} ) $函数执行,并传入一个参数匿名function
$(function(){
var inp = document.getElementById('inp');
//在元素上注册事件,inp.addEventListener(click,sendReq,false);
BH.EventUtil.addHandler(inp,'click',sendReq);
//--------------------------------------------------
// 后台业务逻辑
function sendReq(){// 处理 后台的函数
//$.post('URL',{msg:this.value},function(result){
// CallBack....
//});
alert('发送了指定的数据到后台:' + this.value);
}
});
// 利用桥模式 分开俩个业务逻辑单元
$(function(){
var inp = document.getElementById('inp');
BH.EventUtil.addHandler(inp,'click',bridgeHadler);
function bridgeHadler(){
var msg = this.value;
sendReq(msg);
}
function sendReq(msg){// 处理后台的函数
//$.post('URL',{msg:this.value},function(result){
// CallBack....
//});
alert('发送了指定的数据到后台:' + msg);
}
//单元测试的时候,后台可以直接做测试,不依赖于前台的输入,前面代码强依赖于前台的输入才能执行测试,前后台解耦。
sendReq('我也是数据..');
});
</script>
</head>
<body>
<input id=inp type=button value="我是数据.." />
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8>
// 桥模式:
var PublicClass = function(){
var name = '张三';//private variable
// getter 访问私用成员变量
this.getName = function(){//原先变量只能在内部访问,现在可以在外部访问了,这就是桥模式
return name ;
};
};
var p1 = new PublicClass();
alert(p1.getName());
var PublicClass = function(){
// 私用化的变量
var privateMethod = function(){
alert('执行了一个很复杂的操作...');
};
// 单元测试这个很复杂的函数
//privateMethod();
this.bridgeMethod = function(){
return privateMethod();
}
};
var p1 = new PublicClass();
p1.bridgeMethod();
// 桥模式: 使每个单元都能独立运行,又能组织在一起
var Class1 = function(a,b,c){
this.a = a ;
this.b = b ;
this.c = c ;
};
var Class2 = function(d,e){
this.d = d ;
this.e = e ;
};
var BridgeCalss = function(a,b,c,d,e){
this.class1 = new Class1(a,b,c);
this.class2 = new Class2(d,e);
};
//桥模式,可以起到桥的作用就可以了。整体分开或者组合在一起。
</script>
</head>
<body>
</body>
</html>