《設計模式》 - 6. 橋接模式( Bridge )
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
結果顯示 :
相關文章
- 設計模式 | 橋接模式(bridge)設計模式橋接
- C#設計模式-橋接模式(Bridge Pattern)C#設計模式橋接
- C#設計模式系列:橋接模式(Bridge)C#設計模式橋接
- JAVA設計模式之 橋接模式【Bridge Pattern】Java設計模式橋接
- 設計模式--橋接模式Bridge(結構型)設計模式橋接
- 設計模式(五)橋接模式Bridge == Pointer To Implementation設計模式橋接
- 橋接模式(Bridge)橋接模式
- 設計模式的征途—8.橋接(Bridge)模式設計模式橋接
- C#設計模式(8)——橋接模式(Bridge Pattern)C#設計模式橋接
- 設計模式 - Bridge 橋模式設計模式
- 設計模式-橋接模式設計模式橋接
- 設計模式:橋接模式設計模式橋接
- c++涉及模式 橋接模式(bridge Pattern)C++模式橋接
- Java設計模式-橋接模式Java設計模式橋接
- 小白設計模式:橋接模式設計模式橋接
- 設計模式之橋接模式設計模式橋接
- 設計模式(八)——橋接模式設計模式橋接
- 設計模式之【橋接模式】設計模式橋接
- javascript設計模式橋接模式JavaScript設計模式橋接
- 設計模式(十二):橋接模式設計模式橋接
- PHP 設計模式之橋接模式PHP設計模式橋接
- GoLang設計模式19 - 橋接模式Golang設計模式橋接
- Java設計模式(7)----------橋接模式Java設計模式橋接
- 9.設計模式-橋接模式設計模式橋接
- 極簡設計模式-橋接模式設計模式橋接
- Python設計模式-橋接模式Python設計模式橋接
- 大話設計模式—橋接模式設計模式橋接
- 設計模式之橋接設計模式橋接
- 設計模式(七)橋接設計模式橋接
- 設計模式之旅12--橋接模式設計模式橋接
- Java設計模式之(六)——橋接模式Java設計模式橋接
- 23種設計模式(9)- 橋接模式設計模式橋接
- 設計模式系列 11-- 橋接模式設計模式橋接
- Android設計模式之橋接模式Android設計模式橋接
- java設計模式之一 橋接模式Java設計模式橋接
- 我學設計模式 之 橋接模式設計模式橋接
- 設計模式學習-裝飾模式,橋接模式設計模式橋接
- Java橋模式(Bridge模式)Java模式