JS 橋接模式

時間 2019-11-06

原文原文鏈接

1. 簡介

橋接模式（Bridge）將抽象部分與它的實現部分分離，使它們均可以獨立地變化。
其實就是函數的封裝，好比要對某個DOM元素添加color和backgroundColor，能夠封裝個changeColor函數，這樣能夠在多個類似邏輯中提高智商...html

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?