《设计模式》 - 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

结果显示 :