js设计模式——桥接模式

---

 

定义：将抽象化(Abstraction)与实现化(Implementation)脱耦，使得二者可以独立地变化。

 

常用场景：在js中，桥接模式常用于事件监听器和ajax请求的解耦，以便于进行单元测试。

 

---

 

 

举个栗子

　　　　普通方法。

var btn=$('#btn');
btn.on('click',function () {
　 var myid=this.id;
  $.ajax({
    url:'test.html',
    data:{
      id:myid
    },
    dataType:'html',
    success:function(data){
      console.log(data);
    }
  });
})

在上面的代码中，鼠标点击按钮元素获取元素的id值，并将id值作为ajax请求的参数，发送到服务器。

可以看到，click事件和ajax请求紧密的联系起来了，这样的话ajax请求就无法进行单元测试，必须通过点击按钮事件来测试ajax请求的正确性。

 

　　　　桥接模式。

var btn=$('#btn');
btn.on('click',function () {
  bridge(this.id);
})
function bridge(id){
  $.ajax({
    url:'test.html',
    data:{
      id:id
    },
    dataType:'html',
    success:function(data){
      console.log(data);
    }
  });
}

在桥接模式中，ajax请求不再依赖click事件，而是bridge函数，相当于在click事件和ajax请求中增加一座桥即bridge函数，

这样就实现了click事件和ajax请求的解耦，从而进行单元测试时不再需要一次次的回到浏览器点击按钮了！~~

---