學習JavaScript設計模式(代理模式)_javascript技巧

代理模式是為一個對象提供一個代用品或預留位置，以便控制對它的訪問
代理模式的用處(個人理解)：為了保障當前對象的單一職責(相對獨立性),而需要建立另一個對象來處理調用當前對象之前的一些邏輯以提高代碼的效率、狀態判斷等。
代理模式中最常用的是虛擬代理和緩衝代理

一、虛擬代理
虛擬代理是把一些開銷很大的對象，延遲到真正需要它的時候才去建立執行
樣本: 虛擬代理實現圖片預先載入

// 圖片載入函數var myImage = (function(){  var imgNode = document.createElement("img");  document.body.appendChild(imgNode);  return {    setSrc: function(src) {      imgNode.src = src;    }  }})();// 引入代理對象var proxyImage = (function(){  var img = new Image;  img.onload = function(){    // 圖片載入完成，正式載入圖片    myImage.setSrc( this.src );  };  return {    setSrc: function(src){      // 圖片未被載入時，載入一張提示圖片      myImage.setSrc("file://c:/loading.png");      img.src = src;    }  }})();// 調用代理對象載入圖片proxyImage.setSrc( "yun_qi_img/qq.jpg");

樣本: 虛擬代理合并HTTP請求
假設一個功能需要頻繁的進行網路請求，這會造成相當大的開銷，解決方案是通過一個代理函數來收集一段時間之內的請求，一次性發給伺服器。
例如：做一個檔案同步的功能，當我們選中一個檔案時，就同步到另外一台待命伺服器上

// 檔案同步函數var synchronousFile = function( id ){  console.log( "開始同步檔案，id為：" + id );}// 使用代理合并請求var proxySynchronousFile = (function(){  var cache = [], // 儲存一段時間內需要同步的ID    timer; // 定時器指標  return function( id ){    cache[cache.length] = id;    if( timer ){      return;    }    timer = setTimeout( function(){      proxySynchronousFile( cache.join( "," ) ); // 2s 後向本體發送需要同步的ID集合      clearTimeout( timer ); // 清空定時器      timer = null;      cache = []; // 晴空定時器    },2000 );  }})();// 綁定點擊事件var checkbox = document.getElementsByTagName( "input" );for(var i= 0, c; c = checkbox[i++]; ){  c.onclick = function(){    if( this.checked === true ){      // 使用代理進行檔案同步      proxySynchronousFile( this.id );    }  }}

二、 緩衝代理
緩衝代理可以為一些開銷大的運算結果提供暫時的儲存，在下次運算時，如果傳遞進來的參數跟之前一致，則可以返回前面的運算結果。
樣本: 為乘法、加法等建立緩衝代理

// 計算乘積var mult = function(){  var a = 1;  for( var i = 0, l = arguments.length; i < l; i++){    a = a * arguments[i];  }  return a;};// 計算加和var plus = function () { var a = 0;  for( var i = 0, l = arguments.length; i < l; i++ ){    a += arguments[i];  }  return a;};// 建立緩衝代理的工廠var createProxyFactory = function( fn ){  var cache = {}; // 緩衝 - 存放參數和計算後的值  return function(){    var args = Array.prototype.join.call(arguments, "-");    if( args in cache ){ // 判斷出入的參數是否被計算過      console.log( "使用緩衝代理" );      return cache[args];    }    return cache[args] = fn.apply( this, arguments );  }};// 建立代理var proxyMult = createProxyFactory( mult ),  proxyPlus = createProxyFactory( plus );console.log( proxyMult( 1, 2, 3, 4 ) ); // 輸出： 24console.log( proxyMult( 1, 2, 3, 4 ) ); // 輸出： 緩衝代理 24console.log( proxyPlus( 1, 2, 3, 4 ) ); // 輸出： 10console.log( proxyPlus( 1, 2, 3, 4 ) ); // 輸出： 緩衝代理 10

以上三個樣本為大家詳細介紹了javascript代理模式，希望對大家的學習有所協助。