<!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>桥设计模式</title>
<!--
@theme: javascript高级 桥模式设计
@autor：EthanCoco
@date：2015-11-21
@email：lijianlin0204@163.com
-->
<!-- 引入的核心js公共文件 -->
<script type=text/javascript charset=utf-8 src="jquery-1.8.0.min.js"></script>
<script type=text/javascript charset=utf-8>
//命名空间
var LJL = {};
//单体模式 跨浏览器事件处理
LJL.EventHandler = {
addHandler : function(element,type,handle){
if(element.addEventListener){ //狐火
element.addEventListener(type,handle,false);
}else if(element.attachEvent){ //IE
element.attachEvent('on'+type,handle,false);
}
},
removeHandler : function(element,type,handle){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handle,false);
}
}
};
// 桥接模式: 主要作用就是把抽象和现实分离开来，使他们可以完全独立变化
// 应用场景：事件监听回调机制 (用户点击一个按钮,向服务器端发送信息)
// 当页面加载完毕之后执行函数体
/*
//经典
$(function(){
// 1前台业务逻辑
var ipn = document.getElementById('ipn');
// 用事件注册的方式 在元素上添加事件
LJL.EventHandler.addHandler(ipn,'click',sendMsg);
//--------------------------------------------------
// 2后台业务逻辑
function sendMsg(){//处理后台的函数
alert(this.value);
}
})
*/
// 利用桥模式 分开俩个业务逻辑单元
$(function(){
// 1前台业务逻辑 : 这一段代码处理前台的事件注册和绑定的
var ipn = document.getElementById('ipn');
// 用事件注册的方式 在元素上添加事件
LJL.EventHandler.addHandler(ipn,'click',bridgeHandler);
//--------------------------------------------------
// 利用桥模式分开
function bridgeHandler(msg){
var msg = this.value;
sendMsg(msg);
}
//--------------------------------------------------
// 2后台业务逻辑 ：这一段代码处理后台发送请求的
function sendMsg(msg){//处理后台的函数
alert(msg);
}
//单元测试
sendMsg("I have getVlaue");
});
// 桥模式：特权函数
var PublicClass = function(){
//private variable
var name = '张三';
// 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>
<input id=ipn type=button value="getValue"/>
</body>
</html>
网友评论