7-JavaScript设计模式——桥接模式

桥接模式 有以下三种使用场景：

1、事件监听回调机制的分离

2、特权函数（在作用域外部访问其内部私有成员变量的函数）

3、实现独立化单元

1、事件监听回调机制的分离

<button id="btn">按钮</button>

// 获得按钮对象
var oBtn = document.getElementById('btn');

// 正常情况下我们是这样为元素添加事件的
oBtn.addEventListener('click', function(){
  
  alert(this.innerHTML + ': 我被点击了');
  
  // 如果我们如何对回调函数进行单元测试呢？
});

// 使用 桥接模式 将回调函数分离出来
oBtn.addEventListener('click', bridge);

// 桥接函数
function bridge(){
  var target = this.innerHTML;
  clickEvent(target);
}
// 下面这个函数实现了 解耦
function clickEvent(target){
  alert(target + ': 我被点击了');
}

2、特权函数（在作用域外部访问其内部私有成员变量的函数）

// 特权函数
var PublicClass = function(){
  var name = '张三';
  
  // 访问私有成员变量
  this.getName = function(){
    return name;
  };
};

var p1 = new PublicClass();
alert(p1.getName());// 张三

// 特权函数
var PublicClass = function(){
  // 私有成员方法
  var privateMethod = function(){
    alert('执行了一个很复杂的操作...');
  };
  
  // 通过特权函数去访问这个私有的独立单元
  this.bridgeMethod = function(){
    return privateMethod();
  };
};

var p1 = new PublicClass();
p1.bridgeMethod();// 执行了一个很复杂的操作...

3、实现独立化单元

// 独立化单元
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 bridgeClass = function(a, b, c, d, e){
  this.class1 = new Class1(a, b, c);
  this.class2 = new Class2(d, e);
};