怎么用typescript實(shí)現(xiàn)Bridge橋接模式

今天小編給大家分享一下怎么用typescript實(shí)現(xiàn)Bridge橋接模式的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Bridge（橋接模式）

Bridge（橋接模式）屬于結(jié)構(gòu)型模式，是一種解決繼承后靈活拓展的方案。

意圖：將抽象部分與它的實(shí)現(xiàn)部分分離，使它們可以獨(dú)立地變化。

橋接模式比較難理解，我會一步步還原該設(shè)計模式的思考，讓你體會這個設(shè)計模式是如何一步一步被提煉出來的。

舉例子

如果看不懂上面的意圖介紹，沒有關(guān)系，設(shè)計模式需要在日常工作里用起來，結(jié)合例子可以加深你的理解，下面我準(zhǔn)備了三個例子，讓你體會什么場景下會用到這種設(shè)計模式。

汽車生產(chǎn)線改造為新能源生產(chǎn)線

汽油車與新能源汽車的生產(chǎn)流程有很大相似之處，那么汽油車生產(chǎn)線能否快速改造為新能源汽車生產(chǎn)線呢？

如果汽油車生產(chǎn)線沒有將內(nèi)部實(shí)現(xiàn)解耦，只把生產(chǎn)汽油車的各部分獨(dú)立了出來，對新能源車生產(chǎn)線是沒什么用處的，但如果汽油車生產(chǎn)線提供了更底層的能力，比如加裝輪胎，加裝方向盤，那么這些步驟是可以同時被汽油車與新能源車所共享的。

在設(shè)計汽油車生產(chǎn)線時，就將生產(chǎn)過程與汽油車解耦，使其可以快速運(yùn)用到新能源汽車的生產(chǎn)，這就是橋接模式的一種運(yùn)用。

窗口（Window）類的派生

假設(shè)存在一個 Window 窗口類，其底層實(shí)現(xiàn)在不同操作系統(tǒng)是不一樣的，假設(shè)對于操作系統(tǒng) A 與 B，分別有 AWindow 與 BWindow 繼承自 Window，現(xiàn)在要做一個新功能 ManageWindow（管理器窗口），就要針對操作系統(tǒng) A 與 B 分別生成 AManageWindow 與 BManageWindow，這樣顯然不容易拓展。

無論我們新增支持 C 操作系統(tǒng)，還是新增支持一個 IconWindow，類的數(shù)量都會成倍提升，因?yàn)槲覀兯龅?AMangeWindow 與 BMangeWindow 同時存在兩個即以上的獨(dú)立維度，這使得增加維度時，代碼變得很冗余。

適配多個搭建平臺的物料

做前端搭建平臺時，經(jīng)常出現(xiàn)一些物料（組件）因?yàn)楣袒四硞€搭建平臺的 API，因此無法遷移到另一個搭建平臺，如果要遷移，就需要為不同的平臺寫不同的組件，而這些組件中大部分 UI 邏輯都是一樣的，這使得產(chǎn)生大量代碼冗余，如果再兼容一個新搭建平臺，或者為已有的 10 個搭建平臺再創(chuàng)建一個新組件，工作量都是寫一個組件的好幾倍。

意圖解釋

意圖：將抽象部分與它的實(shí)現(xiàn)部分分離，使它們可以獨(dú)立地變化。

“抽象” 部分與 “實(shí)現(xiàn)” 部分分離，這句話看起來很像接口與實(shí)現(xiàn)。確實(shí)，如果 “抽象” 指的是 接口(Interface)，而 “實(shí)現(xiàn)” 指的是 類(Class) 的話，這就是簡簡單單的 class MyWindow implements Window 類實(shí)現(xiàn)過程而已。

但后半句話 “使它們可以獨(dú)立地變化” 會讓你難以和前半句聯(lián)系起來，如果說 “抽象” 不變，“實(shí)現(xiàn)” 可以隨意改變還好理解，但反過來就難以解釋了。

其實(shí)橋接模式中，抽象指的是一種接口（Abstraction），實(shí)現(xiàn)指的也是一種接口（Implementor），其中 Implementor 并不是直接實(shí)現(xiàn)了 Abstraction 定義的接口，而是提供更底層的方法，使 Abstraction 可以基于它們封裝出自己的接口實(shí)現(xiàn)。

這樣一來，Abstraction 的接口可以隨意變化，畢竟調(diào)用的是 Implementor 提供函數(shù)的組合，只要 Implementor 提供的功能全面，Implementor 可以不變；相應(yīng)的，Implementor 的實(shí)現(xiàn)也可以隨意變化，只要提供的底層函數(shù)不變，就不影響 Abstraction 對其的使用。

上面舉的三個例子都是這樣，我們應(yīng)該把汽油車生產(chǎn)線的標(biāo)準(zhǔn)與通用汽車生產(chǎn)線標(biāo)準(zhǔn)分離、將具體功能窗口與適配不同操作系統(tǒng)的基礎(chǔ) GUI 能力隔離、將組件功能與平臺功能隔離，只有做到了抽象部分與實(shí)現(xiàn)部分的隔離，才可以通過組合滿足更多場景。

結(jié)構(gòu)圖

Abstraction：定義抽象類的接口。

RefinedAbstraction：擴(kuò)充 Abstraction。

Implementor：定義實(shí)現(xiàn)類的接口，該接口可以與 Abstraction 接口不一致。

ConcreteImplementor：實(shí)現(xiàn) Implementor 接口并定義它的具體實(shí)現(xiàn)。

抽象部分就是 Abstraction，實(shí)現(xiàn)部分就是 Implementor，在這個結(jié)構(gòu)圖中，它們是分離的，可以各自獨(dú)立變化的，橋接模式，就是指 imp 這個橋，通過 Implementor 實(shí)現(xiàn) Abstraction 接口，就算是橋接上了，這種組合的橋接相比普通的類實(shí)現(xiàn)更靈活，更具有拓展性。

代碼例子

對于完全版橋接模式，Implementor 可以有多套實(shí)現(xiàn)，Abstraction 不需關(guān)心具體用的是哪一種實(shí)現(xiàn)，而是通過抽象工廠方式封裝。下面舉一個簡單版的例子。

下面例子使用 typescript 編寫。

class Window {

  private windowImp: WindowImp

  public drawBox() {

    // 通過畫線生成 box

    this.windowImp.drawLine(0, 1)

    this.windowImp.drawLine(1, 1)

    this.windowImp.drawLine(1, 0)

    this.windowImp.drawLine(0, 0)

  }

}

// 拓展 window 就非常容易

class SuperWindow extends Window {

  public drawIcon {

    // 通過自定義畫線

    this.windowImp.drawLine(0, 5)

    this.windowImp.drawLine(3, 9)

  }

}

橋接模式的精髓，通過上面的例子可以這么理解：

Window 的能力是 drawBox，那繼承 Window 容易拓展 drawIcon 嗎？默認(rèn)是不行的，因?yàn)?Window 并沒有提供這個能力。經(jīng)分析可以看出，劃線是一種基礎(chǔ)能力，不應(yīng)該與 Window 代碼耦合，因此我們將基礎(chǔ)能力放到 windowImp 中，這樣 drawIcon 也可以利用其基礎(chǔ)能力畫線了。

弊端

不要過度抽象，橋接模式是為了讓類的職責(zé)更單一，維護(hù)更便捷，但如果只是個小型項(xiàng)目，橋接模式會增加架構(gòu)設(shè)計的復(fù)雜度，而且不正確的模塊拆分，把本來關(guān)聯(lián)的邏輯強(qiáng)制解耦，在未來會導(dǎo)致更大的問題。

另外橋接模式也有簡單與復(fù)雜模式之分，只有一種實(shí)現(xiàn)的場景就不要用抽象工廠做過度封裝了。

以上就是“怎么用typescript實(shí)現(xiàn)Bridge橋接模式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。