JS 橋接模式

chemzqm 發布于2019-08-21 18:19 / 1122人閱讀

摘要：簡介橋接模式將抽象部分與它的實現部分分離，使它們都可以獨立地變化。同時橋接模式也有自己的缺點大量的類將導致開發成本的增加，同時在性能方面可能也會有所減少。

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. 總結

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

分離接口和實現部分，一個實現未必不變地綁定在一個接口上，抽象類（函數）的實現可以在運行時刻進行配置，一個對象甚至可以在運行時刻改變它的實現，同將抽象和實現也進行了充分的解耦，也有利于分層，從而產生更好的結構化系統。

提高可擴充性

對客戶隱藏實現細節。

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

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

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

JS 抽象工廠模式

JS 工廠模式

JS 建造者模式

JS 原型模式

JS 單例模式

JS 回調模式

JS 外觀模式

JS 適配器模式

JS 利用高階函數實現函數緩存(備忘模式)

JS 狀態模式

JS 橋接模式

JS 觀察者模式

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

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

PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～

GPU云服務器云服務器橋接模式橋接模式linux js繼承模式 JS設計模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90349.html

js設計模式 --- 橋接設計模式

摘要：他們兩個互相獨立，不會影響到對方對于兩個獨立變化的維度，使用橋接模式再適合不過了。橋接設計模式橋接設計模式是許多其他設計模式的基礎,比如裝飾模式, 代理模式都或多或少看到他的影子, 在面向對象設計中最重要的一個特點就是繼承, 然而作為拓展類的功能的方式有兩種 -- 繼承和橋接, 橋接用我簡單的理解就是放棄使用繼承的方式拓展類, 而是采用包含另一個具有一定功能的對象來拓展類, 下面來...

jsdt 2019-08-26 11:47 評論0 收藏0
一個例子了解什么是橋接模式

摘要：更多前端技術和知識點，搜索訂閱號菌訂閱橋接模式實際上就是將邏輯抽象和具體的實現分離。以追加字符串到文件中為例代碼從變為上面代碼是讀取某個文件并在文件中追加字符串，最后調用回調函數。請關注我的訂閱號，不定期推送有關的技術文章，只談技術不談八卦 showImg(https://segmentfault.com/img/remote/1460000020002974?w=640&h=426)...

muzhuyu 2019-08-26 10:38 評論0 收藏0
橋接&組合

摘要：橋接實現的時候橋接模式非常有用可能正是由于這個該模式使用地不夠廣泛在設計時該模式可以弱化與使用它的類和對象之間的耦合該模式的作用在于將抽象與其實現隔離開讓他們獨立變化而且對于事件驅動編程有許多好處有以及其他基于動作的方法無論它們是用來創建鼓橋接實現 API 的時候,橋接模式非常有用,可能正是由于這個,該模式使用地不夠廣泛.在設計 js API 時,該模式可以弱化API 與使用它的類...

yuanxin 2019-08-20 11:14 評論0 收藏0
JS 適配器模式

摘要：另外，適配器模式和其它幾個模式可能容易讓人迷惑，這里說一下大概的區別適配器和橋接模式雖然類似，但橋接的出發點不同，橋接的目的是將接口部分和實現部分分離，從而對他們可以更為容易也相對獨立的加以改變。 1. 簡介適配器模式（Adapter）是將一個類（對象）的接口（方法或屬性）轉化成客戶希望的另外一個接口（方法或屬性），適配器模式使得原本由于接口不兼容而不能一起工作的那些類（對象）可以一...

Jeffrrey 2019-08-22 11:18 評論0 收藏0
設計模式之橋接模式

摘要：橋接模式中的所謂脫耦，就是指在一個軟件系統的抽象化和實現化之間使用關聯關系組合或者聚合關系而不是繼承關系，從而使兩者可以相對獨立地變化，這就是橋接模式的用意。 0x01.定義與類型定義：將抽象部分與它的具體實現部分分離，使它們都可以獨立地變化。橋接模式將繼承關系轉化成關聯關系，它降低了類與類之間的耦合度，減少了系統中類的數量，也減少了代碼量。橋接模式中的所謂脫耦，就是指在一個軟...

kycool 2019-08-19 10:34 評論0 收藏0