代理模式

代理模式是为一个对象提供一个代用品或者占位符,以便控制对它的访问。

明星找经纪人作为代理就是一个例子,还有就是帮忙牵线搭桥的媒人也算这类

代理模式的关键是:

当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替代对象来控制对这个对象的访问,客户实际访问的是替身对象,替身对象对请求做了一些小的处理之后再把强求传递给本体对象,

首先我们模拟一个叫做小明的男孩子追求自己女神A的场景——送花;

var Flower = function(){

}

var xiaoming = {
  sendFlower:function(target){
    var flower = new Flower();
    target.receiveFlower(flower);
  }
}

var A = {
  receiveFlower:function(flower){
    console.log('收到花'+flower);
  }
}

xiaoming.sendFlower(A);

接下来我们引入代理B,即小明通过B来送A花

var Flower  = function(){}

var xiaoming = {
  sendFlower:function(target){
    var flower = new Flower();
    target.receiveFlower(flower);
  }
}    

var B = {
  receiveFlower:function(flower){
    A.receiveFlower(flower);
  }
}

var A = {
  receiveFlower:function(flower){
    console.log('收到花'+flower);
  }
}

xiaoming.sendFlower(B);

很显然,执行的结果和第一段代码一致,至此我们完成了一个最简单的代理模式的编写。

我们假设一个场景,假设A在心情好的时候会收下花,心情不好的时候拒绝但是我们可爱的小明是不知道这个事情的,因此,必须由B进行代理,

var Flower = function(){

}

var xiaoming = {
  sendFlower:function(target){
    var flower = new Flower();
    target.receiveFlower(flower);
  }
}

var B = {
  receiveFlower:function(flower){
    A.listenGoodMood(function(){  // 监听A的好心情
      A.receiveFlower(flower);
    })
  }
}

var A= {
  receiveFlower:function(flower){
    console.log('收到花'+flower);
  },
  listenGoodMood:function(fn){
    setTimeout(function(){
      fn();
    },10000)
  }
}

xiaoming.sendFlower(B);

保护代理和虚拟代理

保护代理在这里的例子中说明的是:B可以为A拦截一些不必要的请求,虚拟代理指的是,由于花可能很贵为了不让小明花很多的冤枉钱,买花的这件事情交给B做就行了。最后小明再给B就好了。

var B = {
  receiveFlower:function(flower){
    A.listenGoodMood(function(){ // 监听好心情
      var flower = new Flower();
      A.listenGoodMood(flower);
    })
  }
}

虚拟代理是常用的一种代理模式,这里也只是重点讨论虚拟代理;

上面这个例子只是起到抛砖引玉的作用,下面我们拿一个真实场景的例子来说明这种情况。

虚拟代理实现图片的预加载:

在web开发中,图片预加载是一种常用的技术,如果直接给某一个img标签节点设置src属性由于图片过大或者网络不佳,图片的位置就会有一段时间是空白的,常见的做法是先loading一张菊花图,然后异步方式加载图片,等待图片加载好了之后再把它填充到img节点里面,这种场景很适合虚拟代理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。