橋接模式將抽象部分與實(shí)現(xiàn)部分分離開來，使兩者都可以獨(dú)立的變化，并且可以一起和諧地工作。抽象部分和實(shí)現(xiàn)部分都可以獨(dú)立的變化而不會(huì)互相影響，降低了代碼的耦合性，提高了代碼的擴(kuò)展性。

按照GoF的定義，橋接模式的作用在于“將抽象與其實(shí)現(xiàn)隔離開來，以便二者獨(dú)立變化”。這種模式對(duì)于Javascript中常見的事件驅(qū)動(dòng)的編程大有裨益。

橋接模式最常見和實(shí)際的應(yīng)用場(chǎng)合之一是事件監(jiān)聽器回調(diào)函數(shù)。 example：事件監(jiān)聽器，把事件處理的語句封裝到回調(diào)函數(shù)中，通過接口而不是實(shí)現(xiàn)進(jìn)行編程。

基本理論

橋接模式定義：將抽象部分與它的實(shí)現(xiàn)部分分離，使它們都可以獨(dú)立地變化。

橋接模式主要有4個(gè)角色組成：

（1）抽象類

（2）擴(kuò)充抽象類

（3）實(shí)現(xiàn)類接口

（4）具體實(shí)現(xiàn)類

根據(jù)javascript語言的特點(diǎn)，我們將其簡化成2個(gè)角色：

（1）擴(kuò)充抽象類

（2）具體實(shí)現(xiàn)類

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

橋接模式的實(shí)現(xiàn)

理解橋接模式的思想，關(guān)鍵是要理解其分離抽象部分和實(shí)現(xiàn)部分的思想。我們舉例進(jìn)行說明

最簡單的橋接模式

其實(shí)我們最經(jīng)常用的jQuery的each函數(shù)就是一個(gè)典型的橋接模式，我們模擬其實(shí)現(xiàn)如下：

var each = function (arr, fn) {

  for (var i = 0; i < arr.length; i++) {

    var val = arr[i];

    if (fn.call(val, i, val, arr)) {

      return false;

    }

  }

}

var arr = [1, 2, 3, 4];

each(arr, function (i, v) {

  arr[i] = v * 2;

})

在這個(gè)例子中，我們通過each函數(shù)循環(huán)了arr數(shù)組，別看這個(gè)例子很常見，但其中就包含了典型的橋接模式。

在這個(gè)例子中，抽象部分是each函數(shù)，也就是上面說的擴(kuò)充抽象類，實(shí)現(xiàn)部分是fn，即具體實(shí)現(xiàn)類。抽象部分和實(shí)現(xiàn)部分可以獨(dú)立的進(jìn)行變化。這個(gè)例子雖然簡單，但就是一個(gè)典型的橋接模式的應(yīng)用。

插件開發(fā)中的橋接模式

橋接模式的一個(gè)適用場(chǎng)景是組件開發(fā)。我們平時(shí)開發(fā)組件為了適應(yīng)不同場(chǎng)合，組件相應(yīng)的會(huì)有許多不同維度的變化。橋接模式就可以應(yīng)用于此，將其抽象與實(shí)現(xiàn)分離，使組件的擴(kuò)展性更高。

假設(shè)我們要開發(fā)一個(gè)彈窗插件，彈窗有不同的類型：普通消息提醒，錯(cuò)誤提醒，每一種提醒的展示方式還都不一樣。這是一個(gè)典型的多維度變化的場(chǎng)景。首先我們定義兩個(gè)類：普通消息彈窗和錯(cuò)誤消息彈窗。

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

}

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

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

function LinerAnimation() {

}

LinerAnimation.prototype.show = function () {

  console.log("it is liner");

}

function EaseAnimation() {

}

EaseAnimation.prototype.show = function () {

  console.log("it is ease");

}

這兩個(gè)類就是具體實(shí)現(xiàn)類，它們實(shí)現(xiàn)具體的顯示效果。那我們?nèi)绾握{(diào)用呢？

var message = new MessageDialog(new LinerAnimation());

message.show();

var error = new ErrorDialog(new EaseAnimation());

error.show();

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

總結(jié)

學(xué)習(xí)橋接模式關(guān)鍵是要理解抽象部分與實(shí)現(xiàn)部分的分離，使得二者可以獨(dú)立的變化，而不必拘泥于形式。JS插件靈活的變化，適用場(chǎng)景的多變就非常適合使用這種模式來實(shí)現(xiàn)。使用橋接模式最重要的是要找出系統(tǒng)中不同的變化維度。

（1）橋接模式優(yōu)點(diǎn)：

把抽象與實(shí)現(xiàn)隔離開，有助于獨(dú)立地管理軟件的各組成部分。

（2）橋接模式缺點(diǎn)：

每使用一個(gè)橋接元素都要增加一次函數(shù)調(diào)用，這對(duì)應(yīng)用程序的性能會(huì)有一些負(fù)面影響。提高了系統(tǒng)的復(fù)雜程度。如果一個(gè)橋接函數(shù)被用于連接兩個(gè)函數(shù)，而其中某個(gè)函數(shù)根本不會(huì)在橋接函數(shù)之外被調(diào)用，那么此時(shí)這個(gè)橋接函數(shù)就不是非要不可的。

橋接模式“將抽象與實(shí)現(xiàn)隔離開來，以便二者獨(dú)立變化”。它可以促進(jìn)代碼的模塊化、促成更簡潔的實(shí)現(xiàn)并提高抽象的靈活性。它可以用來把一組類和函數(shù)連接起來，而且提供了一種借助于特權(quán)函數(shù)訪問私用數(shù)據(jù)的手段。