首頁 >web前端 >js教程 >詳細解讀JavaScript設計模式開發中的橋接模式(進階篇)

詳細解讀JavaScript設計模式開發中的橋接模式(進階篇)

亚连
亚连原創
2018-05-21 14:12:021481瀏覽

橋接模式的適用場合非常廣泛,除了在事件回調函數與接口之間進行橋接外,橋接模式也可以用於連接公開的API代碼和私用的實現代碼,下面我們就來詳解JavaScript設計模式開發中的橋接模式使用

橋接模式將抽象部分與實現部分分離開來,使兩者都可以獨立的變化,並且可以一起和諧地工作。抽象部分和實作部分都可以獨立的變化而不會互相影響,降低了程式碼的耦合性,提高了程式碼的擴展性。
依照GoF的定義,橋接模式的功能在於「將抽象與其實現隔離開來,以便二者獨立變化」。這種模式對於Javascript中常見的事件驅動的程式設計大有裨益。

橋接模式最常見且實際的應用場合之一是事件監聽器回呼函數。 example:事件監聽器,把事件處理的語句封裝到回呼函數中,透過介面而不是實作進行程式設計。

基本理論

橋接模式定義:將抽象部分與它的實作部分分離,使它們都可以獨立地變更。
橋接模式主要有4個角色組成:
(1)抽象類別
(2)擴充抽象類別
(3)實作類別介面
(4)具體實作類別
根據javascript語言的特點,我們將其簡化成2個角色:
(1)擴充抽象類別
(2)具體實現類別
怎麼去理解橋接模式呢?我們接下來舉例說明

橋接模式的實作

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

最簡單的橋接模式

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

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

在這個例子中,我們透過each函數循環了arr數組,別看這個例子很常見,但其中就包含了典型的橋接模式。
在這個例子中,抽象部分是each函數,也就是上面說的擴充抽象類,實作部分是fn,也就是具體實作類別。抽象部分和實作部分可以獨立的進行變更。這個例子雖然簡單,但就是一個典型的橋接模式的應用。

外掛程式開發中的橋接模式

橋接模式的一個適用場景是元件開發。我們平時開發組件為了適應不同場合,組件對應的會有許多不同維度的變化。橋接模式就可以應用於此,將其抽象與實作分離,使元件的擴展性更高。
假設我們要開發一個彈窗插件,彈窗有不同的類型:普通訊息提醒,錯誤提醒,每一種提醒的展示方式還都不一樣。這是一個典型的多維度變化的場景。首先我們定義兩個類別:普通訊息彈跳窗和錯誤訊息彈跳窗。

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方法進行顯示,但是顯示的動畫效果不同。我們定義兩種顯示的效果類別如下:

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

這兩個類別就是具體實作類,它們實現具體的顯示效果。那我們如何調用呢?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

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

總結

學習橋接模式關鍵是要理解抽象部分與實現部分的分離,使得二者可以獨立的變化,而不必拘泥於形式。 JS插件靈活的變化,適用場景的多變就非常適合使用這種模式來實現。使用橋接模式最重要的是要找出系統中不同的變化維度。
(1)橋接模式優點:把抽象與實作隔離開,有助於獨立管理軟體的各組成部分。
(2)橋接模式缺點:每使用一個橋接元素都要增加一次函數調用,這對應用程式的效能會有一些負面影響。提高了系統的複雜程度。如果一個橋接函數被用來連接兩個函數,而其中某個函數根本不會在橋接函數之外被調用,那麼此時這個橋接函數就不是非要不可的。
橋接模式「將抽象與實現隔離開來,以便二者獨立變化」。它可以促進程式碼的模組化、促成更簡潔的實現並提高抽象的靈活性。它可以用來把一組類別和函數連結起來,而且提供了一種借助於特權函數來存取私人資料的手段。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

設計模式中的組合模式在JavaScript程式建構中的使用(進階篇)

詳細解讀在JavaScript中實作設計模式中的轉接器模式的方法(圖文教學)

JavaScript設計模式開發中組合模式的使用教學課程(進階篇)

#

以上是詳細解讀JavaScript設計模式開發中的橋接模式(進階篇)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn