③【結構型設計模式】代理模式

一、寫在前面

代理模式(Proxy)：由于一個物件不能直接參考另一個物件，所以需要通過代理物件在這
兩個物件之間起到中介的作用，

上述的簡介，你能想到這個模式是怎么樣的嗎？

本系列文章，遲來的更新，

關注公眾號“筆優站長”可閱讀全部文章喲，

二、場景實體 —— 跨域

請求地址的更新變換

假如有這樣的一個場景，由于用戶相冊模塊上傳的照片量越來越大，導致服務器端需要將圖片上傳模塊重新部署到另外一個域（可理解為另一臺服務器）中，這樣對于前端來說，用戶上傳圖片的請求路徑發生變化，指向其他服務器，這就導致跨域問題，

假設地址如下：

原地址：https://upload-sc.biunav.com/

新域地址：https://upload-hz.biunav.com/

為什么我向咱們圖片上傳模塊所在的服務器發送的請求，得不到資料呢？

$.ajax({
  url: 'https://upload-hz.biunav.com',
  success:function(res{
    //無法獲取回傳的資料
  }
})

這時候打開控制臺，發現己經報錯了，出現跨域問題了，

一切只因跨域

由于 JavaScript 對安全訪問因素的考慮，不允許跨域呼叫其他頁面，這里的域你可以想象成域名，

比如百度的域名http://www.baidu.com，

淘寶的域名 http://www.taobao.com，

不同域名下的頁面是不能直接呼叫的，這樣百度域名下的頁面是不允許直接呼叫淘寶頁面，

這也是一種 JavaScript 中因同源策略所定義的限制，不過僅此一點限制還不夠，JavaScript 還對同一城名不同的埠號、同-城名不同協議、域名和域名對應的IP、主城與子域、子域與子域等
做了限制，都不能直接呼叫，

瀏覽器的同源策略

同源策略是一個重要的安全策略，它用于限制一個origin的檔案或者它加載的腳本如何能與另一個源的資源進行互動，它能幫助阻隔惡意檔案，減少可能被攻擊的媒介，

同源的定義

如果兩個 URL 的 protocol、port (en-US) (如果有指定的話)和 host 都相同的話，則這兩個 URL 是同源，這個方案也被稱為“協議/主機/埠元組”，或者直接是 “元組”，（“元組” 是指一組專案構成的整體，雙重/三重/四重/五重/等的通用形式），

下表給出了與 URL http://store.company.com/dir/page.html 的源進行對比的示例:

三、代理物件

以上面的相冊為例子，相冊頁面與圖片上傳模塊所在的服務器之間你可抽象成兩個物件，那么現在的問題是，它們之間被一條河隔開了，就像天河兩端的牛郎織女，只能遠遠觀望而不能相聚一見，

他們的情感感動萬物，所以才有那么多需求為他們搭橋，同樣你想讓跨域兩端的物件之間實作通信，你就需要找個代理物件來實作他們之間的通信，

雖然他們之間分開了，但是我們可以找一個代理物件來實作相互之間的通信，

代理物件有很多，簡單一點的如 img 之類的標簽通過 src 屬性可以向其他域下的服務器發送請求，不過這類請求是get 請求，并且是單向的，它不會有回應資料，就好比你站在河的一邊向另一邊發訊息，卻又不想讓別人聽見，所以你可以將你的訊息寫在紙上放在口袋里，然后扔過去，不過河對岸有沒有人按收到你的訊息就不得而知了，

1、站長統計

站長平臺會有對于你的頁面的統計項，其實作原理就是在頁面觸發一些動作的時候向站長平臺發送這類 img 的get 請求，然后他們會對你發的請求做統計，然而你并不知道統計的相關訊息，

  //統計代理

var Count = (function () {
    //快取圖片
    var _img = new Image();

    //回傳統計函式
    return function (param) {
        //統計請求
        var str = 'http://www.***.com/a.gif';

        //拼接請求字串
        for (const key in param) {
            str += key + '=' + param[key];
        }

        //發送統計請求
        _img.src = str;
    }
})();

//測驗用例: 統計number
Count({ number: 10 });

上面是一個簡單的站長統計，就是使用了img的src來說實作的，

2、JSONP

第二種代理物件形式是通過 script 標簽，比如我們在 CDN（內容分發網路，一種更接近用戶的網路架構，是用戶可以就近獲取內容)上更快速地獲取 jQuery 檔案時，用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

來獲取，然而這種獲取方式獲取的 script 內容是不變的，而我們需要的代理物件，是對頁面與瀏覽器間通信的，顯然上面的方式還不能滿足我們的需求，不過我們知道通過 src 屬性可實作 get 請求，因此我們可以在src 指向的 url(請求地址）上面添加一些欄位資訊，然后服務器端獲取這些欄位，再相應地生成一份內容，

如下:

//前端瀏覽器頁面
<script type="text/javascript">

    //回呼函式，列印出請求的資料與回應的資料
    function jsonpCallBack(res,req){
        console.log(res,req)
    }
</script>

<script type="text/javascript" src="http://localhost/test/jsonp.php?callback=jsonpCallBack&data=getJsonPData"></script>

//另一個域下服務器請求介面

<?

    // 后端獲取的請求欄位資料，并回傳內容
    $data = $_GET['data'];
    $callback = $_GET['callback'];
    echo $callback."('success','".$data."')";

?>

這種方式，你可以想象成河里面的一只小船，通過小船將你的請求發送給對岸，然后對岸的人們將資料放在小船里為你帶回來，

3、代理模板

當然，這種方式還要求其他域要有一定可靠性，否則將會攻擊到你的網站，當然這種方式也被人稱之為 JSONP 方案，有時我們還會通過一個方法來動態生成需要的 JSONP 中的script標簽，

與之類似的還有另外一種方案是被稱之為代理模板的方案，解決思路是這樣的，既然不同城之間相互呼叫對方的頁面是有限制的，那么自己域中的兩個頁面相互之間的呼叫是可以的，即代理頁面 B 呼叫被代理的頁面 A 中物件的方式是可以的，

那么要實作這種方式我們只需要在被訪問的域中，請求回傳的 Header 重定向到代理頁面，并在代理頁面中處理被代理的頁面 A就可以了，

X域中被代理頁面 A

<script type="text/javascript">

    //回呼函式，列印出請求的資料與回應的資料
    function jsonpCallBack(data){
        console.log(data)
    }
</script>

<iframe name="proxyIframe" id="proxyIframe" src="" frameborder="0"></iframe>

<form action="http://localhost/test/proxy.php" method="POST" target="proxyIframe">
    <input type="text" name="callback" value="callback">
    <input type="text" name="callback" value="http://localhost:8080/proxy.html">
    <input type="submit" value="提交">

</form>

其次在X域中我們也要有一個代理頁面，主要負責將自己頁面 URL 中 searcher 部分的資料決議出來，如 http://www.*.com?type=1&title=aa 這個url 中 searcher 部分指的就是?type=1&title=aa，

將資料重新組裝好，呼叫 A 頁面里的回呼函式，將組裝好的資料作為引數傳入父頁面中定義的回呼函式中并執行，

X域中被代理頁面 B

<script type="text/javascript">

  // 頁面加載后智校
  window.onload = function () {
      //如果不在A頁面中回傳，不執行
      if (top == self) return;

      // 獲取決議searcher中的資料

      var arr = location.search.substr(1).split("&"),

          // 預定義函式名稱及引數
          fn, args;

      for (var i = 0, len = arr.length, item; i < len; i++) {
          // 決議searcher中的每組資料

          item = arr[i].split('=');
          // 判斷是否為回呼函式
          if (item[0] == 'callback') {
              // 設定回呼函式
              fn = item[1];
          } else if (item[0] == 'arg') {    //判斷是否為引數集
              //設定引數集
              args = item[1];
          }
      }

      try {
          // 執行A頁面中預設的回呼函式
          eval('top.' + fn + '("' + args + '")');
      } catch (error) {
          console.error(error)
      }

  }

</script>
  

最后是Y域中的被請求的介面檔案C，它的主要作業是將從X域過來的請求的資料決議并獲取回呼函式欄位與代理模板路徑欄位資料，并打包回傳，并將自己的Header 重定向為X域的代理模板 B 所在路徑，

<?

    $proxy = $_POST['proxy'];
    $callback = $_POST['callback'];
    header("Location: ".$proxy."?callback=".$backcall."&arg=success")

?>

代理模式章節到站下車，本章內容比較詳細，文字較多，整理了很久，有興趣的朋友可以仔細閱讀，相信你會有一個不錯的識訓，

四、總結

通過幾種代理模式對跨域問題的解決方案，我們可以看到代理物件可以完全解決被代理物件與外界物件之間的耦合，當然從對被代理的頁面角度來看是一種保護代理，然而從服務器角度來看又是一種遠程代理，

除了在跨域問題中有很多應用外，有時對 物件的實體化對資源的開銷很大，如頁面加載初期加載檔案有很多，此時能夠延遲加載一些圖片對頁面首屏加載時間收益是很大的；再比如圖片預覽頁面，頁面中有很多圖片，面對這么多的圖片如果一加載對資源的開銷也是很可怕的，所以通常是當用戶點擊某張圖片時加載這張圖片，

但如果該圖片源檔案也很大，此時我們常用的做法是先代理加載一張預覽圖片，然后再將原圖片替換這張預覽圖片，這種代理有時也稱為虛擬代理，

由此可見代理模式可以解決系統之間的耦合度以及系統資源開銷大的問題，通過代理物件可保護被代理物件，使被代理物件拓展性不受外界的影響，

也可通過代理物件解決某一互動或者某一需求中造成的大量系統開銷，當然無論代理模式在處理系統、物件之間的耦合度問題還是在解決系統資源開銷問題，他都將構建出一個復雜的代理物件，增加系統的復雜度，同時也增加了一定的系統開銷，當然有時對于這種開銷往往是可接受的在JavaScript中，它的執行常常依托于瀏覽器，所以代理模式解決問題的思想有時也為我們提供了一些解決問題的方案，

留個彩蛋

文中提到的動態加載 script 標簽的方法，查查資料看看你能否實作，對于圖片預覽這種代理模式，新建一個頁面試著去實作它，

下章劇透 ：在不改變原物件的基礎上,對其進行擴展(添加屬性或者方法),該如何解決呢？

五、寫在后面

上面就是結構型設計模式中的——代理模式的全部內容了，你學廢了嗎？

有問題請留言或者@博主,謝謝支持o(￣︶￣)o~

感謝您的閱讀,如果此文章或專案對您有幫助，請掃個二維碼點個關注吧，若可以的話再給個一鍵三連吧！

公眾號閱讀的朋友可以點一下右下角的在看和分享哦，

GitHub有開源專案,需要的小伙伴可以順手star一下！

GitHub: https://github.com/langyuxiansheng

更多資訊請關注公眾號: “筆優站長”