javaScript设计模式系列（五）桥接模式

最新推荐文章于 2024-09-13 08:33:26 发布

chu23623

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量99

点赞数

文章标签： javascript 设计模式 ViewUI

原文链接：https://my.oschina.net/u/3238663/blog/1486247

版权

前言

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

正文

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后在执行），是否可以执行，如果可以，其实就是实现（方法），抽象（触发条件）已经隔离开。

转载于:https://my.oschina.net/u/3238663/blog/1486247