代理模式 - 简书

代理模式

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

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

代理模式的关键是：

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

首先我们模拟一个叫做小明的男孩子追求自己女神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节点里面，这种场景很适合虚拟代理。

最后编辑于：2018.11.19 12:57:21