橋接模式

橋接Bridge Pattern又稱為柄體Handle and Body模式或介面Interface模式，是用於把抽象化與實現化解耦，使得二者可以獨立變化。這種型別的設計模式屬於結構型模式，其通過提供抽象化和實現化之間的橋接結構，來實現二者的解耦。

描述

假如要繪製矩形、圓形、橢圓、正方形，我們至少需要4個形狀類，但是如果繪製的圖形需要具有不同的顏色，如紅色、綠色、藍色等，此時至少有如下兩種設計方案：第一種設計方案是為每一種形狀都提供一套各種顏色的版本。第二種設計方案是根據實際需要對形狀和顏色進行組合。對於有兩個變化維度（即兩個變化的原因）的系統，採用方案二來進行設計系統中類的個數更少，且系統擴充套件更為方便，設計方案二即是橋接模式的應用，橋接模式將繼承關係轉換為關聯關係，從而降低了類與類之間的耦合，減少了程式碼編寫量。

模式結構

• Abstraction: 抽象類。
• RefinedAbstraction: 擴充抽象類。
• Implementor: 實現類介面。
• ConcreteImplementor: 具體實現類。

優點

• 分離抽象介面及其實現部分。
• 橋接模式有時類似於多繼承方案，但是多繼承方案違背了類的單一職責原則（即一個類只有一個變化的原因），複用性比較差，而且多繼承結構中類的個數非常龐大，橋接模式是比多繼承方案更好的解決方法。
• 橋接模式提高了系統的可擴充性，在兩個變化維度中任意擴充套件一個維度，都不需要修改原有系統。
• 實現細節對客戶透明，可以對使用者隱藏實現細節。

缺點

• 橋接模式的引入會增加系統的理解與設計難度，由於聚合關聯關係建立在抽象層，要求開發者針對抽象進行設計與程式設計。
• 橋接模式要求正確識別出系統中兩個獨立變化的維度，因此其使用範圍具有一定的侷限性。

模式分析

• 抽象化：抽象化就是忽略一些資訊，把不同的實體當作同樣的實體對待。在面向物件中，將物件的共同性質抽取出來形成類的過程即為抽象化的過程。
• 實現化：針對抽象化給出的具體實現，就是實現化，抽象化與實現化是一對互逆的概念，實現化產生的物件比抽象化更具體，是對抽象化事物的進一步具體化的產物。
• 解耦：解耦就是將抽象化和實現化之間的耦合解脫開，或者說是將它們之間的強關聯改換成弱關聯，將兩個角色之間的繼承關係改為關聯關係。橋接模式中的所謂脫耦，就是指在一個軟體系統的抽象化和實現化之間使用關聯關係（組合或者聚合關係）而不是繼承關係，從而使兩者可以相對獨立地變化，這就是橋接模式的用意。

適用環境

• 如果一個系統需要在構件的抽象化角色和具體化角色之間增加更多的靈活性，避免在兩個層次之間建立靜態的繼承聯絡，通過橋接模式可以使它們在抽象層建立一個關聯關係。
• 抽象化角色和實現化角色可以以繼承的方式獨立擴充套件而互不影響，在程式執行時可以動態將一個抽象化子類的物件和一個實現化子類的物件進行組合，即系統需要對抽象化角色和實現化角色進行動態耦合。
• 一個類存在兩個獨立變化的維度，且這兩個維度都需要進行擴充套件。
• 雖然在系統中使用繼承是沒有問題的，但是由於抽象化角色和具體化角色需要獨立變化，設計要求需要獨立管理這兩者。
• 對於那些不希望使用繼承或因為多層次繼承導致系統類的個數急劇增加的系統，橋接模式尤為適用。

實現

class Shape {
    draw(){
        console.log(this.shape);
    }
}

class Rectangle extends Shape{
    constructor(){
        super();
        this.shape = "Rectangle";
    }
}

class Square extends Shape{
    constructor(){
        super();
        this.shape = "Square";
    }
}

class Circle extends Shape{
    constructor(){
        super();
        this.shape = "Circle";
    }
}

class Color {
    fill(){
        console.log(this.color);
    }
}

class Red extends Color{
    constructor(){
        super();
        this.color = "Red";
    }
}

class Green extends Color{
    constructor(){
        super();
        this.color = "Green";
    }
}

class Blue extends Color{
    constructor(){
        super();
        this.color = "Blue";
    }
}

class Bridge{
    constructor(shape, color){
        this.shape = shape;
        this.color = color;
    }
    init(){
        this.shape.draw();
        this.color.fill();
    }
}

(function(){
    var product = new Bridge(new Rectangle(), new Red());
    product.init(); // Rectangle Red
    var product = new Bridge(new Square(), new Green());
    product.init(); // Square Green
    var product = new Bridge(new Circle(), new Blue());
    product.init(); // Circle Blue
})();

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://segmentfault.com/a/1190000012547750
https://www.runoob.com/design-pattern/bridge-pattern.html
https://design-patterns.readthedocs.io/zh_CN/latest/structural_patterns/bridge.html