JS 橋接模式

SHERlocked93發表於2017-12-22
JS橋接模式

1. 簡介

橋接模式（Bridge）將抽象部分與它的實現部分分離，使它們都可以獨立地變化。
其實就是函式的封裝，比如要對某個DOM元素新增color和backgroundColor，可以封裝個changeColor函式，這樣可以在多個相似邏輯中提升智商...

2. 實現

有時候在多維的變化中橋接模式更加實用，比如可以提取多個底層功能模組，比如提取運動，著色，說話模組，球類可以具有運動和著色模組，人類可以具有運動和說話模組，這樣可以實現模組的快速組裝，不僅僅是實現與抽象部分相分離了，而是更進一步功能與抽象相分離，進而 提升逼格 靈活的建立物件。

class Speed {            // 運動模組
  constructor(x, y) {
    this.x = x
    this.y = y
  }
  run() {  console.log(`運動起來 ${this.x} + ${this.y}`)  }
}

class Color {            // 著色模組
  constructor(cl) {
    this.color = cl
  }
  draw() {  console.log(`繪製顏色 ${this.color}`)  }
}

class Speak {
  constructor(wd) {
    this.word = wd
  }
  say() {  console.log(`說話 ${this.word}`)  }
}

class Ball {                     // 建立球類，可以著色和運動
  constructor(x, y, cl) {
    this.speed = new Speed(x, y)
    this.color = new Color(cl)
  }
  init() {
    this.speed.run()
    this.color.draw()
  }
}

class Man {                    // 人類，可以運動和說話
  constructor(x, y, wd) {
    this.speed = new Speed(x, y)
    this.speak = new Speak(wd)
  }
  init() {
    this.speed.run()
    this.speak.say()
  }
}

const man = new Man(1, 2, 'hehe?')
man.init()                                // 運動起來 1 + 2      說話 hehe?

3. 總結

橋接模式的優點也很明顯，我們只列舉主要幾個優點：

  • 分離介面和實現部分，一個實現未必不變地繫結在一個介面上，抽象類（函式）的實現可以在執行時刻進行配置，一個物件甚至可以在執行時刻改變它的實現，同將抽象和實現也進行了充分的解耦，也有利於分層，從而產生更好的結構化系統。
  • 提高可擴充性
  • 對客戶隱藏實現細節。

同時橋接模式也有自己的缺點：

  • 大量的類將導致開發成本的增加，同時在效能方面可能也會有所減少。

本文是系列文章，可以相互參考印證，共同進步~

  1. JS 抽象工廠模式
  2. JS 工廠模式
  3. JS 建造者模式
  4. JS 原型模式
  5. JS 單例模式
  6. JS 回撥模式
  7. JS 外觀模式
  8. JS 介面卡模式
  9. JS 利用高階函式實現函式快取(備忘模式)
  10. JS 狀態模式
  11. JS 橋接模式
  12. JS 觀察者模式

網上的帖子大多深淺不一，甚至有些前後矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~

參考：
設計模式之橋接模式
《Javascript 設計模式》 - 張榮銘

相關文章