分類 　　保護代理：代理B可以幫助A過濾掉一些請求 　　虛擬代理：代理B把一些開銷很大的物件，要延遲到真正需要的時候才去建立

 

主要作用：A物件的某個方法可以執行某項操作，但如果想在A物件執行之前做些事情，而又不改變A物件，可以先讓B物件做一些事情，再把做處理過的結果給A物件執行

 

需要注意的問題：介面的一致性，即B的方法名和A的方法名要一致。

 

應用場合：圖片預載入、合併HTTP請求、惰性載入、快取代理等   程式碼主要形式

const objectA = {
  doSomething() {
    ...
  };
}

const proxyB 
 
= (function() {
  某些前置事情
  也可以在這裡監聽事件，等待完成後將結果給objectA.doSomething
  return {
    doSomething() {
      某些前置事情
      再把結果給objectA.doSomething
    };
  }
})();

  舉例 1、圖片預載入

const myImage = (function() {
  DOM操作建立名為imageNode的<img>標籤並插入到HTML中
  
 
return {
    setSrc(src) {
      imageNode.src = src;
    }
  }
})();

const proxyImage = (function() {
  const tempImage = new Image;
  tempImage.onload--(成功)-->呼叫myImage.src，設定真正的圖片地址
  return {
    setSrc(src) {
      為myImage設定菊花圖;
      tempImage.src = src; // 預載入
    }
  }
})();
// 呼叫
proxyImage.srcSrc('....圖片的地址');

2、合併HTTP請求

const synchronousFile = function(id) {
  發起請求
};
const proxySynchronousFile = (function() {
  const cache = []; // 存放多個檔案id，一起傳送
  let timer;

  return function(id) {
    cache.push(id);
    if(timer) {
      return;
    }
    timer = setTimeout(function() {
      同步cache中的全部檔案，清空定時器
    }, 2000);
  }
})();

3、快取代理-乘積計算

const mult = function() {
  return 所有傳入引數的乘積;
};
const proxyMult = (function() {
  const cache = {};
  return function() {
    if (arguments的相乘結果已經在cache中){
      return cache[arguments.toString()];
    }
    return cache[arguments.toString()] = mult.apply(this, arguments);
  };
})();

 參考文獻：

[1] 《JavaScript設計模式與開發時間》，曾探，中國工信出版集團.