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