javascript設計模式橋接模式

橋接模式將抽象部分與實現部分分離開來，使兩者都可以獨立的變化，並且可以一起和諧地工作。抽象部分和實現部分都可以獨立的變化而不會互相影響，降低了程式碼的耦合性，提高了程式碼的擴充套件性。

基本理論:

橋接模式定義：將抽象部分與它的實現部分分離，使它們都可以獨立地變化。

橋接模式主要有4個角色組成：

（1）抽象類

（2）擴充抽象類

（3）實現類介面

（4）具體實現類

根據javascript語言的特點，我們將其簡化成2個角色：

（1）擴充抽象類

（2）具體實現類

怎麼去理解橋接模式呢？我們接下來舉例說明。

橋接模式的實現:

理解橋接模式的思想，關鍵是要理解其分離抽象部分和實現部分的思想。我們舉例進行說明。

最簡單的橋接模式:

其實我們最經常用的jQuery的each函式就是一個典型的橋接模式，我們模擬其實現如下:

[JavaScript] 純文字檢視 複製程式碼
var each = function (arr, fn) {
  for (var index = 0; index < arr.length; index++) {
    var val = arr[index];
    if (fn.call(val, index, val, arr)) {
      return false;
    }
  }
}
var arr = [1, 2, 3, 4];
each(arr, function (index, v) {
  arr[index] = v * 2;
})

在這個例子中，我們通過each函式迴圈了arr陣列，別看這個例子很常見，但其中就包含了典型的橋接模式。

在這個例子中，抽象部分是each函式，也就是上面說的擴充抽象類，實現部分是fn，即具體實現類。抽象部分和實現部分可以獨立的進行變化。這個例子雖然簡單，但就是一個典型的橋接模式的應用。

外掛開發中的橋接模式:

橋接模式的一個適用場景是元件開發。我們平時開發元件為了適應不同場合，元件相應的會有許多不同維度的變化。橋接模式就可以應用於此，將其抽象與實現分離，使元件的擴充套件性更高。

假設我們要開發一個彈窗外掛，彈窗有不同的型別：普通訊息提醒，錯誤提醒，每一種提醒的展示方式還都不一樣。這是一個典型的多維度變化的場景。首先我們定義兩個類：普通訊息彈窗和錯誤訊息彈窗。

[JavaScript] 純文字檢視 複製程式碼
function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

這兩個類就是前面提到的抽象部分，也就是擴充抽象類，它們都包含一個成員animation。

兩種彈窗通過show方法進行顯示，但是顯示的動畫效果不同。我們定義兩種顯示的效果類如下：

[JavaScript] 純文字檢視 複製程式碼
function LinerAnimation() {}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

這兩個類就是具體實現類，它們實現具體的顯示效果。那我們如何呼叫呢

[JavaScript] 純文字檢視 複製程式碼
var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

如果我們要增加一種動畫效果，可以再定義一種效果類，傳入即可。