JavaScript 桥接模式

Question

桥接模式是一种 既能把两个对象连接在一起，又能避免二者间的强耦合的方法 。通过“桥”把彼此联系起来，同时又允许他们各自独立变化。

主要作用表现为将抽象与实现隔离，以便二者独立化

桥接实例：

• 事件监听回调机制
• 特权函数
• 桥接组织多个单元

代码实现效果：用一个函数去调用另一个函数

事件监听回调机制分离

应用场景：用户点击一个按钮,向服务器端发送信息

$(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);
  }
});	

利用桥模式分开俩个业务逻辑单元

$(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('我也是数据..');
});	

特权函数

// 桥模式：特权函数
var PublicClass = function(){
  //private variable
  var name = '张三';
  // getter 访问私用成员变量 // 特权函数
  this.getName = function(){
    return name ; 
  };
};

var p1 = new PublicClass();
alert(p1.getName());



var PublicClass2 = function(){
  // 私用化的变量
  var privateMethod = function(){
    alert('执行了一个很复杂的操作...');
  };
  // 单元测试这个很复杂的函数
  //privateMethod();

  // 通过特权函数去访问这个私用的独立单元
  this.bridgeMethod = function(){
    return privateMethod();
  }
};

var p1 = new PublicClass2();
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);
};