桥接模式

• 将抽象部分与他的实现部分分离，这样抽象化与实现化解耦，使他们可以独立的变化
• 应用场景：实现系统可能有多个角度分类，每一种角度都可能变化
• 桥接双方可以通过实现桥接口进行单方面扩展，也可以继续抽象类而单方面扩展，而之间的调用就从桥接口来作为突破口，不会受到双方扩展的任何影响

class A{
  constructor(bridge){
    this.bridge = bridge;
  }
  go(){
    console.log(`从${this.from()}到${this.bridge.to()}`);
  }
  from(){
    throw new Error('子类必须实现此方法')
  }
}
class A1 extends A{
  from(){return 'A1'}
}
class A2 extends A{
  from(){return 'A2'}
}
class B{
  to(){
    throw new Error('子类必须实现此方法')
  }
}
class B1 extends B{
  from(){return 'B1'}
}
class B2 extends B{
  from(){return 'B2'}
}
let b2 = new B2();
let a1 = new A1(b2);
a1.go();

应用场景

//绘制一个小球 将定位和绘制颜色分开，利用Circle作为桥，传递数据
function Position(x,y){
  this.x = x;
  this.y = y;
}
function CircleColor(color){
  this.color = color;
}
function Circle(x,y,circleColor){
  this.position = new Position(x,y);
  this.circleColor = new CircleColor(circleColor);
}
Circle.prototype.render=function(){
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(this.position.x,this.position.y,100,0,2*Math.PI);
  ctx.fillStyle = this.circleColor.color;
  ctx.fill();
}
let c = new Circle(100,100,'red');
c.render();