快捷導(dǎo)航

學(xué)習(xí)JavaScript設(shè)計(jì)模式(代理模式)

更新時(shí)間：2015年12月03日 09:38:43 投稿：lijiao

這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹代理模式，對(duì)代理模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下

代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問
代理模式的用處(個(gè)人理解)：為了保障當(dāng)前對(duì)象的單一職責(zé)(相對(duì)獨(dú)立性),而需要?jiǎng)?chuàng)建另一個(gè)對(duì)象來處理調(diào)用當(dāng)前對(duì)象之前的一些邏輯以提高代碼的效率、狀態(tài)判斷等。
代理模式中最常用的是虛擬代理和緩存代理

一、虛擬代理
虛擬代理是把一些開銷很大的對(duì)象，延遲到真正需要它的時(shí)候才去創(chuàng)建執(zhí)行
示例: 虛擬代理實(shí)現(xiàn)圖片預(yù)加載

// 圖片加載函數(shù)
var myImage = (function(){
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);

  return {
    setSrc: function(src) {
      imgNode.src = src;
    }
  }
})();

// 引入代理對(duì)象
var proxyImage = (function(){
  var img = new Image;
  img.onload = function(){
    // 圖片加載完成，正式加載圖片
    myImage.setSrc( this.src );
  };
  return {
    setSrc: function(src){
      // 圖片未被載入時(shí)，加載一張?zhí)崾緢D片
      myImage.setSrc("file://c:/loading.png");
      img.src = src;
    }
  }
})();

// 調(diào)用代理對(duì)象加載圖片
proxyImage.setSrc( "http://images/qq.jpg");

示例: 虛擬代理合并HTTP請(qǐng)求
假設(shè)一個(gè)功能需要頻繁的進(jìn)行網(wǎng)絡(luò)請(qǐng)求，這會(huì)造成相當(dāng)大的開銷，解決方案是通過一個(gè)代理函數(shù)來收集一段時(shí)間之內(nèi)的請(qǐng)求，一次性發(fā)給服務(wù)器。
例如：做一個(gè)文件同步的功能，當(dāng)我們選中一個(gè)文件時(shí)，就同步到另外一臺(tái)備用服務(wù)器上

// 文件同步函數(shù)
var synchronousFile = function( id ){
  console.log( "開始同步文件，id為：" + id );
}
// 使用代理合并請(qǐng)求
var proxySynchronousFile = (function(){
  var cache = [], // 保存一段時(shí)間內(nèi)需要同步的ID
    timer; // 定時(shí)器指針

  return function( id ){
    cache[cache.length] = id;
    if( timer ){
      return;
    }

    timer = setTimeout( function(){
      proxySynchronousFile( cache.join( "," ) ); // 2s 后向本體發(fā)送需要同步的ID集合
      clearTimeout( timer ); // 清空定時(shí)器
      timer = null;
      cache = []; // 晴空定時(shí)器
    },2000 );
  }
})();

// 綁定點(diǎn)擊事件
var checkbox = document.getElementsByTagName( "input" );

for(var i= 0, c; c = checkbox[i++]; ){
  c.onclick = function(){
    if( this.checked === true ){
      // 使用代理進(jìn)行文件同步
      proxySynchronousFile( this.id );
    }
  }
}

二、緩存代理
緩存代理可以為一些開銷大的運(yùn)算結(jié)果提供暫時(shí)的存儲(chǔ)，在下次運(yùn)算時(shí)，如果傳遞進(jìn)來的參數(shù)跟之前一致，則可以返回前面的運(yùn)算結(jié)果。
示例: 為乘法、加法等創(chuàng)建緩存代理

// 計(jì)算乘積
var mult = function(){
  var a = 1;
  for( var i = 0, l = arguments.length; i < l; i++){
    a = a * arguments[i];
  }
  return a;
};
// 計(jì)算加和
var plus = function () {
 var a = 0;
  for( var i = 0, l = arguments.length; i < l; i++ ){
    a += arguments[i];
  }
  return a;
};
// 創(chuàng)建緩存代理的工廠
var createProxyFactory = function( fn ){
  var cache = {}; // 緩存 - 存放參數(shù)和計(jì)算后的值
  return function(){
    var args = Array.prototype.join.call(arguments, "-");
    if( args in cache ){ // 判斷出入的參數(shù)是否被計(jì)算過
      console.log( "使用緩存代理" );
      return cache[args];
    }
    return cache[args] = fn.apply( this, arguments );
  }
};
// 創(chuàng)建代理
var proxyMult = createProxyFactory( mult ),
  proxyPlus = createProxyFactory( plus );

console.log( proxyMult( 1, 2, 3, 4 ) ); // 輸出： 24
console.log( proxyMult( 1, 2, 3, 4 ) ); // 輸出： 緩存代理 24
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 輸出： 10
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 輸出： 緩存代理 10

以上三個(gè)示例為大家詳細(xì)介紹了javascript代理模式，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: