應屆生都會的設計模式之代理模式

• 定義：

  • 爲一個對象提供一種代理以控制這個對象額訪問
  • 代理對象起到相似中介的做用，會增長一些功能，（如 校驗 合併等等） ，也會去掉一些原有對象的功能。

• 分類

  • 虛擬代理：虛擬代理是把一些開銷很大的對象，延遲到真正須要它的時候纔去建立執行。
  • 安全代理：控制真實對象的訪問權限
  • 遠程代理：一個對象將不一樣空間的對象進行局部代理
  • 智能代理：調用對象代理處理另一些事情如垃圾回收機制增長額外的服務

• 使用場景

  • 虛擬代理：圖片加載，文件上傳。
  • 保護代理：登陸操做後才能看全功能，前端校驗。
  • 遠程代理：監控多個對象的狀態，總機監控分店。
  • 智能代理：提供額外的其餘服務，火車站代售處。

• 表單驗證

  • 保護代理就是起到保護的做用，用來過濾掉一下沒必要要的請求 ，將真正須要的遞給本體。
  • 譬如 驗證用戶是否惟一
  • 這裏咱們應用 保護代理的思想 若是用戶名是不合法的 則不會將該請求給本體執行
  • 發送ajax請求

• 代理模式分析

  • 這樣編寫代碼 的確可以完成業務的需求 可以完成表單的驗證 可是存在不少問題
  • 1. 綁定的函數比較龐大 包含了不少if-else語句 看着都很噁心 這些語句須要覆蓋全部的校驗規則
  • 2. 綁定的函數缺少彈性 若是增長了一種新的校驗規則 或者想把密碼的長度校驗從6改爲8 咱們都必須深刻
  • 3. 綁定的函數的內部實現 這是違反了開發-封閉原則的
  • 4. 算法的複用性差 若是程序中增長了另外一個表單 這個表單也須要進行一些相似的校驗 那咱們極可能的將這些校驗邏輯複製的漫天遍野

• 不能濫用模式 有時候僅僅是給代碼增長了複雜度了

• 源碼實現

  • 圖片懶加載

  // 圖片懶加載 --- 短暫的佔位圖片
  // 會緩存到本地 等圖片加載成功再去加載原有的圖片
  // 請求過來 本地緩存 佔位
  div{
      display: inline-block;
      border: 1px solid black;
  }
  div.img{
      width: 100px;
  }
  
  <div id="demo"></div>
  <button id="oBtn"></button>
  
  function MyImage(_id) {
      var oImg = document.createElement('img');
      this.setSrc = function(_src) {
          oImg.src = _src;
      }
          document.getElementById(_id).appendChild(oImg);
      }
  var ProxyImage = (function() {
      var oImg = new Image();
      var oMyImage = new MyImage('demo');
      oImg.onload = function() {
          setTimeout(function() {
              oMyImage.setSrc(oImg.src);
          }, 2000);
      }
      return function(occupySrc, src) {
          oImg.src = src;
          oMyImage.setSrc(occupySrc);
      }
  })();
  複製代碼

  • 文件上傳

  // 虛擬代理的思想延遲到它真正去改變的時候纔去改變
  #show{
      width: 100px;
      height: 100px;
      border: 1px solid black;
  }
  
  <div id="show">haha</div>
  <button type="bg">add greenBg</button>
  <button type="cl">add blueColor</button>
  <button type="fs">add fontSize</button>
  <button type="fw">add fontWeight</button>
  <button type="op">add opacity</button>
  
  var oDiv = document.getElementById('show');
  var oButtonArray = document.getElementsByTagName('button');
  var ProxyRequest = function(func) {
      var cache = [];
      var timer = null;
      return function() {
          cache.push(this.getAttribute('type'));
          clearTimeout(timer);
          timer = setTimeout(function() {
              func(oDiv, cache);
              cache = [];
          }, 2000);
      }
  };
  var realChangeStyle = ProxyRequest(changeStyle);
  for(var i = 0; i < oButtonArray.length; i++) {
      oButtonArray[i].onclick = realChangeStyle;
  }
  
  // 改變樣式
  function changeStyle(dom, typeArr) {
      var typeObj = {
          bg: ['backgroundColor', 'green'],
          cl: ['color', 'blue'],
          fs: ['fontSize', '24px'],
          fw: ['fontWeight', 'bold'],
          op: ['opacity', '0.3']
      }
      if(typeArr.constructor == Array) { // 數組
          typeArr.forEach(function(ele) {                    
              dom.style[typeObj[ele][0]] = typeObj[ele][1];
          })
      }else { // 萬一是字符串
          dom.style[typeObj[typeArr][0]] = typeObj[typeArr][1];
      }
  }
  複製代碼

你的點贊是我持續輸出的動力 但願能幫助到你們 互相學習 有任何問題下面留言 必定回覆