javascript 設計模式之代理模式

虛擬代理實現圖片預加載

// 虛擬代理實現圖片預加載

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

      let proxyImage = (function(){
        let img = new Image;
        img.onload = function(){
          myImage.setSrc (this.src)
        }
        return {
          setSrc: function(src){
            myImage.setSrc('file:///E:/手裏上整理出來的照片/網上收集的照片/山川河流.jpg');
            img.src = src
          }
        }
      })()

      proxyImage.setSrc('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560840791&di=976399fb61f71f4597347ca330dcf84a&imgtype=jpg&er=1&src=http%3A%2F%2Ffile.elecfans.com%2Fweb1%2FM00%2F81%2FF7%2Fo4YBAFw9O2aAIU4lAAKUIw4770I426.png')
      
複製代碼

虛擬代理合並 HTTP 請求

<input type="checkbox" id="1" />1 
        <input type="checkbox" id="2" />2
        <input type="checkbox" id="3" />3 
        <input type="checkbox" id="4" />4
        <input type="checkbox" id="5" />6 
        <input type="checkbox" id="7" />7
        <input type="checkbox" id="8" />8 
        <input type="checkbox" id="9" />9
    <script>
        // 虛擬代理合並 HTTP 請求
      let synchronousFile = function(id) {
        console.log("開始同步文件id爲" + id);
      };

      let proxySynchronousFile = (function(){
          let cache = [],
          timer;
          return function (id){
              cache.push(id);
              if (timer) { // 保證不會覆蓋已經啓動的定時器
                  return
              }
              timer = setTimeout(function(){
                  synchronousFile(cache.join(','));
                  clearTimeout(timer);
                  timer = null;
                  cache.length = 0; // 清空數組
              },2000)
          }
      })()

      let checkbox = document.getElementsByTagName("input");

      for (var i = 0, c; c = checkbox[i++];) {
        c.onclick = function() {
          if (this.checked === true) {
            proxySynchronousFile(this.id);
          }
        };
      }
    </script>
   
複製代碼

緩存代理

let mult = function(){
          console.log('開始計算乘積');
          var a = 1;
          for(var i = 0, l = arguments.length; i < l; i++){
              a = a * arguments[i]
          }
          return a;
      };
      let proxyMult = (function(){
          let cache = {};
          return function(){
              let 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
複製代碼

該資料來源曾探著的《設計模式與開發實踐》