06.Javascript設計模式之橋接模式—-Bridge

06.Javascript設計模式之橋接模式----Bridge

本文主要通過例子的形式來介紹設計模式中的橋接模式。

在設計一個Javascript API的時候，可以用這個模式來弱化它與使用它的類和對象之間的耦合。按照GoF的定義，橋接模式的作用在於“將抽象與其實現隔離開來，以便二者獨立變化”。
這種模式對於Javascript中常見的事件驅動編程非常有用。

橋接模式樣本一：DOM事件監聽器

假使有這樣一個命題：頁面上有多個按鈕，還有一張可控尺寸的圖片，id為img，要求點擊不同的按鈕（根據按鈕的value判斷，如：value="600x800"），圖片的尺寸得到相應的改變。
於是，完成這個操作，通常情況下，我們不考慮設計模式，這樣做就能完成功能：

addEvent(domElement,"click",function(e){    var btnValue = this.value.split("x");    var size = {        width : btnValue[0],        height : btnValue[1]    };    var oImg = document.getElementById("img");    oImg.style.width = size.width + "px";    oImg.style.height = size.height + "px";});

這樣的設計，完全能實現我們的功能，點擊不同的按鈕，圖片的大小都會隨之而變化。

但是，如果你要對這個功能進行單元測試，或者甚至你想在像Firebug那樣的命令列的環境中來調試並運行它，那就表現的有些困難了。

因此，在這個時候我們考慮到了使用橋接模式，將監聽器方法抽取出來，成為一個單獨的API函數，而且保證該API函數與節點本身沒有必然的耦合，我們的設計如下：

var changeSize = function(buttonValue){    var btnValue = buttonValue.split("x");    var size = {        width : btnValue[0],        height : btnValue[1]    };    var oImg = document.getElementById("img");    oImg.style.width = size.width + "px";    oImg.style.height = size.height + "px";};var changeSizeBridge = function(e){    changeSize(this.value);};addEvent(domElement,"click",changeSizeBridge);

通過這樣的設計，功能也能得到非常完美的實現，並且，這個API的使用範圍也大大拓寬了，提供給了我們更大的設計自由。
非常明顯地可以看出，這個時候的changeSize方法並沒有和事件對象綁定在一起，我們可以在單元測試中單獨的運行這個API，也可以在獨立的命令列模式下
快速調試我們設計的這個代碼，我們可以這樣來單獨測試：

changeSize("1204x768");//將圖片的大小改為1024*768

橋接模式最常見和實際的應用場合之一就是事件監聽器回呼函數。

橋接模式樣本二：特權函數

除了在事件回呼函數與介面之間進行橋接外，橋接模式也可以用於串連公開的API代碼和私用的實現代碼。此外，它還可以用來把多個類串連在一起。從類的角度來看，
這意味著把介面作為公開的代碼編寫，而把類的實現作為私用代碼編寫。

如果一個公用的介面抽象了一些也許應該屬於私用性的較為複雜的任務，那麼可以使用橋接模式來收集某些私用性的資訊。可以用一些具有特殊權利的方法作為
橋樑以便方位私用變數空間，而不必冒險下到具體實現的渾水中。這個特例中的橋接性函數也稱之為特權函數。

下面舉一個簡單的例子，通過執行個體設定並擷取其私人的屬性：

var Human = function(){    //這裡定義人類的腳的數量，這個是人類的固有特徵，不可改變    var footNum = 2;    //通過這個方法，即可擷取人類腳的數量    this.getFootNum = function(){        return footNum;    };};var zhaoxianlie = new Human();alert(zhaoxianlie.getFootNum()); //這裡就會告訴大家，趙先烈有兩隻腳

當然了，橋接模式的例子非常非常的多，只要想的倒，大多都可以類比。

本文參考《Javascript設計模式》【Ross Harmes，Dustin Diaz】

小生愚昧，文中如有闡述之不當，還請不要介懷