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