桥接模式

1 桥接模式

定义:桥接模式(Briage): 将抽象部分和它的实现分离, 使它们可以独立的变化.这种类型的设计模式属于结构性设计模式,它是提供抽象化和实现化之间的桥接结构,来实现两者的解耦.

1.1 桥接模式的作用

1. 抽象和实现的分离.
2. 优秀的扩展能力
3. 实现细节对客户透明

1.2 应用场景

要理解桥接模式的思想,关键就是要理解其分离抽象部分和实现部分的思想

场景一

JavaScript中桥接模式最典型的应用就是:数组对象上的forEach函数.

下面是一个的forEach方法的简单模拟

  function forEach(arr=[],callback=()=>{},thisValue= window){
      // 限定参数类型
      if(typeof callback !== "function" || !Array.isArray(arr)) return;
      for(let i = 0,len = arr.length;i < len; i++){
          //改变回调函数的上下文this并传递相应的参数
          callback.call(thisValue, arr[i], i, arr);
      }
 }
 forEach([1,2,3],function(v,i,arr){
     console.log(v,this);
 },{name:"Age"})

上面这个例子就是一个典型的桥接模式,在这个例子中抽象部分时候forEach函数,实现部分是callback,此时抽象部分和实现部分是分离的,都可以独立的发生变化.

场景二

桥接模式在我们处理事件监听的时候经常用到

const app = document.getElementById('app');
function addEvent(ele,eventName,eventFn){
    ele.addEventListener(eventName, eventFn,false)
}
// 通过原生的fetch方法发起获取数据请求
function getFetch(url,id,callback){
    fetch(`${url}?id=${id}`,{method:'get'})
        .then(res => res.json())
        .then(res => callback(res))
}
function getDataById(){
    getFetch('http://localhost:3001/teacher',this.id,res =>{
        console.log(res);
    })
}
addEvent(app,'click',getDataByid);
//上面的getDataById是一个纯事件函数, 内部涉及到this的执行问题,
//调用起来局限性很大,适用性不强, 只能当做事件函数进行正常使用
// 如果你需要单独去参测试函数某个id值的返回,你需要写个点击事件
//或者改变this指向为其拥有特定id值的对象,特别麻烦,对于开发者来说
//这不是一个好API, 因为局限性太大.
// 我们可以利用桥接模式把它分离一下
// 这就是桥接器函数 将修改后的getDataById和事件函数连接起来
function getBridgeById(e){
    getBridgeData(this.id,res =>{
        console.log(res)
    })
}
// 直接传入id,不和this直接挂钩, 任何场合传入id值就可以发送请求
// 使用场景的关联性更小,使用性更大
function getgetBridgeData(id,callback){
     getFetch('http://localhost:3001/teacher',id,res =>{
       callback(res)
    })
}

上面代码中我们利用桥接模式设计了一个getgetBridgeData的方法,通过在这个方法内发起fetch请求,此时我们实现了点击事件与实现部分的解耦.而且getgetBridgeData也可以单独调用,较大了提高适用性和扩展性.

此时getgetBridgeData是抽象部分, 而其中的callback是具体的实现部分,抽象部分只对callback传递参数,实现了两者的分离.

总结: 什么时候需要用到桥接模式? 某些逻辑要扩展或者不希望和实现结构复杂时,可以单独抽象出来,在利用桥接调用, 而抽象部分和实现部分又可以单独进行扩展.