定义

一般由于一个对象不能直接引用另一个对象，所以需要通过代理对象来起到中介的作用。
**

保护代理和虚拟代理

保护代理

  • 代理 B 可以帮助 A过滤掉一些请求，比如送花的人中年龄太大的或者没有宝马的，这种请求就可以直接在代理 B处被拒绝掉这种代理叫作保护代理。
  • 保护代理用于控制不同权限的对象对目标对象的访问，但在 JavaScript并不容易实现保护代理，因为我们无法判断谁访问了某个对象。而虚拟代理是最常用的一种代理模式

    虚拟代理

    虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建

常见模型

跨域

事件代理

  1.  事件委托还有一个名字叫事件代理

demo

image.png

jQuery中的proxy

  1.  因为在setTimeout中this指向全局对象

经典案例

明星经纪人

明星
image.png
经纪人注意这里的proxy语法
image.png

虚拟代理实现图片预加载

不用代理的预加载图片函数实现如下

  1.     var myImage = (function(){
  2.        var imgNode = document.createElement("img");
  3.        document.body.appendChild(imgNode);
  4.        var img = new Image();
  5.        // img.onload 是在图片加载完成之后操作的本身是异步事件
  6.        // 这里的img只是作为src地址的载体，本身不参与文档
  7.        img.onload = function(){
  8.            imgNode.src = this.src;
  9.        };
  10.        return {
  11.            setSrc: function(src) {
  12.                imgNode.src = "http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif";
  13.                img.src = src;
  14.            }
  15.        }
  16.    })();

代理模式解决方案

  1. // 我们将多个事件抽取出来这样他就能干更多的事了
  2. var myImage = (function(){
  3.    var imgNode = document.createElement("img");
  4.    document.body.appendChild(imgNode);
  5.    return {
  6.        setSrc: function(src) {
  7.            imgNode.src = src;
  8.        }
  9.    }
  10. })();
  11. // 代理模式
  12. var ProxyImage = (function(){
  13.    var img = new Image();
  14.    img.onload = function(){
  15.        myImage.setSrc(this.src);
  16.    };
  17.    return {
  18.        setSrc: function(src) {
  19.        myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif");
  20.        img.src = src;
  21.        }
  22.    }
  23. })();
  24. // 调用方式
  25. ProxyImage.setSrc("https://www.baidu.com/img/bd_logo1.png");
  26.    代理模式中国将new image的操作取了出来节约了计算资源

总结

  • 代理对象可以代替本体对象被实例化，此时本体对象未真正实例化，等到合适时机再实例化。
  • 代理模式可以延迟创建开销很大的本体对象，他会把本体的实例化推迟到有方法被调用时。