[[433461]]

一、是什么

代理模式(Proxy Pattern)是為一個對象提供一個代用品或占位符，以便控制對它的訪問

代理模式的關鍵是，當客戶不方便直接訪問一個對象或者不滿足需要時，提供一個替身對象來控制這個對象的訪問，客戶實際上訪問的是替身對象

在生活中，代理模式的場景是十分常見的，例如我們現在如果有租房、買房的需求，更多的是去找鏈家等房屋中介機構，而不是直接尋找想賣房或出租房的人談。此時，鏈家起到的作用就是代理的作用

二、使用

在ES6中，存在proxy構建函數能夠讓我們輕松使用代理模式：

const proxy = new Proxy(target, handler); 

關于Proxy的使用可以翻看以前的文章

而按照功能來劃分，javascript代理模式常用的有：

• 緩存代理
• 虛擬代理

緩存代理

緩存代理可以為一些開銷大的運算結果提供暫時的存儲，在下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回前面存儲的運算結果

如實現一個求積乘的函數，如下：

var muti = function () { 
  console.log("開始計算乘積"); 
  var a = 1; 
  for (var i = 0, l = arguments.length; i < l; i++) { 
    a = a * arguments[i]; 
  } 
  return a; 
}; 

現在加入緩存代理，如下：

var proxyMult = (function () { 
  var cache = {}; 
  return function () { 
    var args = Array.prototype.join.call(arguments, ","); 
    if (args in cache) { 
      return cache[args]; 
    } 
    return (cache[args] = mult.apply(this, arguments)); 
  }; 
})(); 
 
proxyMult(1, 2, 3, 4); // 輸出:24 
proxyMult(1, 2, 3, 4); // 輸出:24 

當第二次調用 proxyMult(1, 2, 3, 4) 時，本體 mult 函數并沒有被計算，proxyMult 直接返回了之前緩存好的計算結果

虛擬代理

虛擬代理把一些開銷很大的對象，延遲到真正需要它的時候才去創建

常見的就是圖片預加載功能：

未使用代理模式如下：

let MyImage = (function(){ 
    let imgNode = document.createElement( 'img' ); 
    document.body.appendChild( imgNode ); 
    // 創建一個Image對象，用于加載需要設置的圖片 
    let img = new Image; 
 
    img.onload = function(){ 
        // 監聽到圖片加載完成后，設置src為加載完成后的圖片 
        imgNode.src = img.src; 
    }; 
 
    return { 
        setSrc: function( src ){ 
            // 設置圖片的時候，設置為默認的loading圖 
            imgNode.src = 'https://img.zcool.cn/community/01deed576019060000018c1bd2352d.gif'; 
            // 把真正需要設置的圖片傳給Image對象的src屬性 
            img.src = src; 
        } 
    } 
})(); 
 
MyImage.setSrc( 'https://xxx.jpg' ); 

MyImage對象除了負責給img節點設置src外，還要負責預加載圖片，違反了面向對象設計的原則——單一職責原則

上述過程loding則是耦合進MyImage對象里的，如果以后某個時候，我們不需要預加載顯示loading這個功能了，就只能在MyImage對象里面改動代碼

使用代理模式，代碼則如下：

// 圖片本地對象，負責往頁面中創建一個img標簽，并且提供一個對外的setSrc接口 
let myImage = (function(){ 
    let imgNode = document.createElement( 'img' ); 
    document.body.appendChild( imgNode ); 
 
    return { 
        //setSrc接口，外界調用這個接口，便可以給該img標簽設置src屬性 
        setSrc: function( src ){ 
            imgNode.src = src; 
        } 
    } 
})(); 
// 代理對象，負責圖片預加載功能 
let proxyImage = (function(){ 
    // 創建一個Image對象，用于加載需要設置的圖片 
    let img = new Image; 
    img.onload = function(){ 
        // 監聽到圖片加載完成后，給被代理的圖片本地對象設置src為加載完成后的圖片 
        myImage.setSrc( this.src ); 
    } 
    return { 
        setSrc: function( src ){ 
            // 設置圖片時，在圖片未被真正加載好時，以這張圖作為loading，提示用戶圖片正在加載 
            myImage.setSrc( 'https://img.zcool.cn/community/01deed576019060000018c1bd2352d.gif' ); 
            img.src = src; 
        } 
    } 
})(); 
 
proxyImage.setSrc( 'https://xxx.jpg' ); 

使用代理模式后，圖片本地對象負責往頁面中創建一個img標簽，并且提供一個對外的setSrc接口;

代理對象負責在圖片未加載完成之前，引入預加載的loading圖，負責了圖片預加載的功能

上述并沒有改變或者增加MyImage的接口，但是通過代理對象，實際上給系統添加了新的行為

并且上述代理模式可以發現，代理和本體接口的一致性，如果有一天不需要預加載，那么就不需要代理對象，可以選擇直接請求本體。其中關鍵是代理對象和本體都對外提供了 setSrc 方法

三、應用場景

現在的很多前端框架或者狀態管理框架都使用代理模式，用于監聽變量的變化

使用代理模式代理對象的訪問的方式，一般又被稱為攔截器，比如我們在項目中經常使用 Axios 的實例來進行 HTTP 的請求，使用攔截器 interceptor 可以提前對 請求前的數據 服務器返回的數據進行一些預處理

以及上述應用到的緩存代理和虛擬代理

參考文獻

https://juejin.cn/post/6844903555036364814#heading-2

https://juejin.cn/post/6992510837403418654#heading-7

https://sothx.com/2021/06/26/proxy/