JavaScript设计模式——桥接模式

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

桥接模式将抽象部分与他的实现部分分离，这样抽象化与实现化解耦，使他们可以独立的变化，使用组合关系代替继承关系实现，从而降低了抽象和实现这两个可变维度的耦合度。
桥方可以通过实现桥接口进行单方面扩展，而另一方可以继承抽象类而单方面扩展，而之间的调用就从桥接口来作为突破口，不会受到双方扩展的任何影响。

桥接模式的使用场景

在系统沿着多个维度变化时，不增加其复杂度并实现解耦。

示例：事件监听

let btnEle = document.querySelector('button')[0];
btnEle.addEventListener('click', handerBridge);

function handlerBridge(){
	getUserInfo();
}

function getUserInfo(){
	// do something
}

当点击按钮的时候发送请求，通过handlerBridge作为桥接方法，连接事件和具体的实现。把事件与具体的业务逻辑解耦。

示例：圆

// 颜色类
 function Color(color){
    this.color = color;
  }
// 位置信息
  function Position(x,y){
    this.x = x;
    this.y = y;
  }
  // 圆类
  function Circle(x,y,circleColor){
    this.position = new Position(x,y);
    this.circleColor = new Color(circleColor);
  }
  // 绘制图形
   Circle.prototype.render = function (){
    let canvas = docuemnt.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();
  } 

圆具有颜色和位置属性，分别使用具体的类实现，位置和颜色可以独立变化互不影响，实现圆与Position和Color的解耦。同时Position和Color类也可以在有相同属性的类中使用。

桥接模式与适配器的区别

桥接模式不修改原本的对象，适配器需要更改原本的对象以适应需求

总结

桥接模式的主要特点是将实现层与抽象层解耦分离，使两部分可以独自变化。通过桥接模式实现解耦，避免需求的改变造成对对象内部的修改。