《設計模式》 - 6. 橋接模式( Bridge )

Cleve_baby發表於2018-07-06

Javascript設計模式 - 原文連結 

Tips : 後文中的 ctor函式是cocos2d - JS 中建構函式 .

橋接模式 ( Bridge ) :

語言 : JavaScript

說明 :

以畫筆為例 , 假設畫筆有3種型號 (大 、中 、小) 和 3種顏色 (黑 、白 、紅) . 正常情況下 每個型號和每種顏色組合(小黑 、中黑 、大黑 、 小白 、中白…)都需要一支 , 那就需要 3*3 = 9 支筆 . 當需求變化時 , 型號和顏色越來越多 , 新增筆的種類也是成倍增加的 , 這時候就需要想辦法解決這個問題 .

解決辦法 :

實際情況中 , 當需要小型筆 和 黑色時 , 只需要用小型筆沾上黑色墨水 , 就可以解決這個問題 , 在程式中也可以把 3種型號的筆 和 3種顏色區分開 , 需要時設定對應的顏色即可 .

顏色類 ( Color ) :

父類 (Color) 屬性 value 用來儲存顏色 , 方法getColor() 用來獲取顏色, 三個子類都繼承父類的屬性和方法 .

var Color = cc.Class.extend({
    value : null,
    getColor: function(){
        return this.value;
    }
});

var Black = Color.extend({
    //ctor 是建構函式 
    ctor: function(){
        this.value = "Black";
    }
});

var White = Color.extend({
    ctor: function(){
        this.value = "White";
    }
});

var Red = Color.extend({
    ctor: function(){
        this.value = "Red";
    }
});

筆類 ( Pen ) :

var Pen = cc.Class.extend({
    color : null,
    size : null,
    setColor: function(color){
        this.color = color;
    },

    draw: function(){
        console.log(this.color + " Picture - By : "+ this.size);
    }

});

var Small_Pen = Pen.extend({
    ctor: function(){
        this.size = "Small-Size Pen";
    }
});

var Medium_Pen = Pen.extend({
    ctor: function(){
        this.size = "Medium-Size Pen";
    }
});

var Big_Pen = Pen.extend({
    ctor: function(){
        this.size = "Big-Size Pen";
    }
});

客戶類 ( Client ) :


var pen = new Small_Pen();         //例項化小型筆
var color = new Black();           //例項化黑色
pen.setColor(color.getColor());    //給筆設定顏色
pen.draw();                        //Black Picture - By : Small-Size Pen

結果顯示 :

這裡寫圖片描述


相關文章