桥接模式

转载请注明出处：http://blog.youkuaiyun.com/u011569040/article/details/50766841

普通模式，前台业务和后台业务是在一起的，不便于调试，调试模式将前台和后台分开，这样后台可以单独进行单元测试

// 桥接模式: 主要作用就是把抽象和现实分离开来，使他们可以完全独立变化
				
				// 应用场景：事件监听回调机制 (用户点击一个按钮,向服务器端发送信息)
				
				// 当页面加载完毕之后执行函数体 window.onload
				
				 // classic 
				 
				$(function(){
					
					// 1前台业务逻辑
					var inp = document.getElementById('inp');
					// 用事件注册的方式 在元素上添加事件
					BH.EventUtil.addHandler(inp,'click',sendReq);
					//--------------------------------------------------
					// 2后台业务逻辑
					function sendReq(){// 处理后台的函数
						//ajax 
						//1 后台服务器的地址
						//2 是一个对象或者一个字符串(参数)
						//$.post('URL',{msg:this.value},function(result){
							// CallBack....
						//});
						alert('发送了指定的数据到后台：' + this.value);
					}
				});			

这样的普通模式，必须在前台点击按钮才能测试sendReq函数，用桥接模式可以单独运行这个函数（BH.EventUtil.addHandler的代码未贴出）

// 利用桥模式 分开俩个业务逻辑单元
				$(function(){
					
					// 1前台业务逻辑 : 这一段代码处理前台的事件注册和绑定的
					var inp = document.getElementById('inp');
					// 用事件注册的方式 在元素上添加事件
					BH.EventUtil.addHandler(inp,'click',bridgeHadler);
					
					//-----------------------------------------------
					
					// 利用桥模式分开					
					function bridgeHadler(){
						var msg = this.value;
						sendReq(msg);
					}
					
					//-----------------------------------------------
					
					// 2后台业务逻辑  ：这一段代码处理后台发送请求的
					function sendReq(msg){// 处理后台的函数
						//ajax 
						//1 后台服务器的地址
						//2 是一个对象或者一个字符串(参数)
						//$.post('URL',{msg:this.value},function(result){
							// CallBack....
						//});
						alert('发送了指定的数据到后台：' + msg);
					}
					
					//单元测试的时候
					sendReq('我也是数据..');
				});