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