JS设计模式之--代理模式

一、代理模式（Proxy）的定义：

代理模式是指对其他对象提供一种代理以控制对这个对象的访问。 代理模式使得代理对象控制对象的具体引用。 代理几乎可以是任何对象：文件，资源，内存中的对象，或者是一些难以复制的东西。

二、模式的代码实现

// 买家
function buyer () {
  this.name = '小李'
}

// 中介: 卖房
function proxy () {}
proxy.prototype.maifang = function() {
 const $buyer = new buyer();
 new seller($buyer).maifang('20万');
}

// 卖家
function seller (buyer) {
  this.buyer_name = buyer.name;
  this.maifang = function(money) {
    console.log(`收到了来自买家${this.buyer_name}的定金【${money}】人民币.`) // 收到了来自买家小李的定金【20万】人民币.
    
  }
}

// 开始做事
new proxy().maifang();

三、模式的应用

1. 使用场景

• 在我们进行vue项目开发中，对跨域问题往往通过配置代理地址来处理，这其中的原理就是代理地址可以直接访问目标地址，但是当前操作域名只能访问到代理的地址，于是我们操作域名通过访问代理地址，再由代理地址访问目标地址，并且将目标地址的返回结果返回。
• 保护代理：指某些请求不符合要求，可以直接在代理对象中拒绝，不必通过被代理对象。
• 缓存代理：为开销大的运算结果提供缓存（缓存异步请求数据、缓存较复杂的运算结果）。
• 虚拟代理：指把一些开销很大的对象延迟到真正需要的时候才去创建，是最常用的一种代理模式。

//先使用一张loading图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到img节点里
// 首先创建一个普通的本体对象，这个对象负责往页面中创建 一个 img 标签，并且提供一个对外的 setSrc 接口，外界调用这个接口，便可以给该 img 标签设置src 属性

let imageEle = (function(){
  let node = document.createElement('img');
  document.body.appendChild(node);
  return {
    setSrc:function(src){
       node.src = src;
    }
  }
})();

//代理对象
let proxy = (function(){
  let img = new Image();
  img.onload = function(){
    imageEle.setSrc(this.src);
  };
  return {
   setSrc:function(src){
    img.src = src;
    imageEle.setSrc('loading.gif');
   }
  }
})();
proxy.setSrc('example.png');

2.优点

• 将代理对象与被调用对象分离，降低了系统的耦合度。代理模式在客户端和目标对象之间起到一个中介作用，这样可以起到保护目标对象的作用。
• 优化性能，减少开销很大的对象。

3.缺点

• 额外代理对象的创建，增加部分内存开销。