橋接設計模式是許多其他設計模式的基礎,比如裝飾模式, 代理模式都或多或少看到他的影子, 在面向對象設計中最重要的一個特點就是繼承, 然而作為拓展類的功能的方式有兩種-- 繼承和橋接, 橋接用我簡單的理解就是放棄使用繼承的方式拓展類, 而是採用包含另一個具有一定功能的對象來拓展類, 下面來看兩種結構。
首先我們假設有一個需求, 有一個圖形介面, 然後有長方形, 正方形, 圓形等圖形類別, 我們需要各種顏色的圖形, 下面用繼承和橋接的方式來實現這種需求.
繼承
橋接
圖形抽象類別
let Shape = function(color) {
this.color = color;
};
Shape.prototype.setColor = function(color) {
this.color = color;
};
Shape.prototype.draw = function() {
new Error();
}圖形類別
let Rectangle = function (color) {
Shape.call(this, color);
};
extend(Rectangle, Shape);
Rectangle.prototype.draw = function () {
color.bepaint("长方形");
};
let Square = function (color) {
Shape.call(this, color);
};
extend(Square, Shape);
Square.prototype.draw = function () {
color.bepaint("正方形");
}
let Circle = function (color) {
Shape.call(this, color);
};
extend(Circle, Shape);
Circle.prototype.draw = function () {
color.bepaint("圆型");
};顏色抽象類別
let Color = function() {
};
Shape.prototype.bepaint = function() {
new Error();
};顏色類別
let Red = function () {
Color.call(this);
};
extend(Red, Color);
Red.prototype.bepaint = function(shape) {
console.log("白色的" + shape);
};
let Green = function () {
Color.call(this);
};
extend(Green, Color);
Green.prototype.bepaint = function(shape) {
console.log("绿色的" + shape);
};
let Blue = function () {
Color.call(this);
};
extend(Blue, Color);
Blue.prototype.bepaint = function(shape) {
console.log("蓝色的" + shape);
};使用
let red = new Red(); //正方形 let square = new Square(); //红色的正方形 square.setColor(red); square.draw(); //长方形 let rectange = new Rectangle(); //红色长方形 rectange.setColor(red); rectange.draw();
橋接設計適用於一個類別存在兩個或多個獨立變化的維度，且這兩個維度都需要進行擴展,
橋接模式實現了抽象化與實現化的脫耦。他們兩個互相獨立，不會影響到對方, 對於兩個獨立變化的維度，使用橋接模式再適合不過了。
相關推薦：
#以上是js橋接設計模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
