JavaScript设计模式 | 13-桥接模式

1、模式定义

桥接模式，在系统中沿着多个维度变化，不仅不会增加系统的复杂度，还可以达到解耦的目的。

2、进一步理解桥接模式

在写代码时，一定要注意对相同的逻辑做抽象提取处理，这很重要。如果这一点能做到，那么我们的代码将会更简洁，重用率也会更大，可读性会更高。这就是我们推荐使用面向对象思想来编程的根本原因。

桥接模式，好比是两个城市之间的高速路。

3、桥接模式 举例

// 封装桥接方法
function changeColor(dom,color,bg){
    // dom就是鼠标事件函数中的this
    dom.style.color = color;
    dom.style.background = bg;
}

document.getElementById('box').onmouseover = function(){
    // this 桥梁
    changeColor(this,'red','#cccccc');
}
document.getElementById('box').onmouseout = function(){
    // this 桥梁
    changeColor(this,'black','#ffffff');
}

4、桥接模式 再举例

桥接模式在多维变化的业务场景中，同样适用。如下示例，实现多元化对象，对抽象层和实现层进行解耦。

// 桥接模式，实现多元化对象，对抽象层和实现层进行解耦

// 第1个抽象单元：运动单元
function Speed(x,y){
    this.x = x;
    this.y = y;
}
Speed.prototype.run = function(){
    console.log('run');
}

// 第2个抽象单元：着色单元
function Color(cl){
    this.color = cl;
}
Color.prototype.draw = function(){
    console.log('draw');
}

// 第3个抽象单元：变形单位
function Shape(sp){
    this.shape = sp;
}
Shape.prototype.change = function(){
    console.log('change');
}

// 第4个抽象单元：说话单元
function Speek(wd){
    this.word = wd;
}
Speek.prototype.say = function(){
    console.log('say');
}


/*创建一个球类*/
function Ball(x,y,c){
    this.speed = new Speed(x,y);
    this.color = new Color(c);
}
Ball.prototype.init = function(){
    this.speed.run();
    this.color.draw();
}

/*创建一个人物类*/
function People(x,y,f){
    this.speed = new Speed(x,y);
    this.font = new Speek(f);
}
People.prototype.init = function(){
    this.speed.run();
    this.font.say();
}

/*创建一个精灵类*/
function Spirite(x,y,c,s){
    this.speed = new Speed(x,y);
    this.color = new Color(c);
    this.shape = new Shape(s);
}
Spirite.prototype.init = function(){
    this.speed.run();
    this.color.draw();
    this.shape.change();
}

// 测试用例
var p = new People(10,12,16);
p.init();

5、小结

桥接模式，最主要的特点是把实现层（元素的事件绑定）与抽象层（如修改页面的UI逻辑）进行解耦分离，使实现层和抽象层都可以在各个的维度上独立地变化。桥接模式是结构之间的结构。

---

完！！！