javaScript设计模式系列(五) 桥接模式

原创
2017/07/24 15:09
阅读数 4

前言

桥接模式可以用来降低,类和对象之间的耦合度。这个模式也尝尝与其他模式混合使用,所以本文只是举一个单纯啊的桥接模式的例子,综合使用以后会逐步的讲解。

正文

GoF的定义,桥接模式的作用在于将“抽象与其实现隔离开来,以便二者独立的变化”。

现看一个简单的例子,在解释下我对这句画的理解。

现在想要在动物园的查询中心,点击一个动物的图标,就可以查询这个动物的信息。

//点击某个动物的图标
someAnimalIcon.onclick = function(){
  var id = this.id;
  //自定义的一个发起请求的方法,使用到这动物的id
  asynRequest("GET",'zoom.url?id='+id,function(req){
    console.log(req)
  })
}

看起来这个逻辑很完美,但是很容发现,我们只能在浏览器中使用这个方法,因为他被绑定在一个点击事件下,并在点击后获取并使用点击元素的id,可是我们希望任何时候懂可以使用这个方法获取动物的信息,而且如果想做测试的时候,或是在非浏览器环境中运行,那只能祝你好运了,所以这样修改看上去更加的合理。

function getAnimalInfo(id,callback){
    asynRequest("GET",'zoom.url?id='+id,function(req){
      callback(req);
    })
}
function getAnimalInfoBridge(e){
  var id = this.id;
  getAnimalInfo(id,function(AnimalInfo){
     console.log(AnimalInfo);
  })
}
someAnimalIcon.onclick = getAnimalInfoBridge;

最后解释一下最开始的那句话:抽象与其实现隔离开来,以便二者独立的变化。

个人的简单理解是,简单想一下,你在浏览器端写的一个方法,如果不依赖浏览器端的操作(比如给定一个id,而不是获取id后在执行),是否可以执行,如果可以,其实就是实现(方法),抽象(触发条件)已经隔离开。

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部