快捷導(dǎo)航

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

更新時間：2016年01月12日 17:16:40 作者：奮飛

這篇文章主要為大家介紹了JavaScript設(shè)計模式中的狀態(tài)模式，對JavaScript設(shè)計模式感興趣的小伙伴們可以參考一下

明星都有經(jīng)紀(jì)人作為代理。如果請明星辦一場商演，只能聯(lián)系其經(jīng)紀(jì)人，經(jīng)紀(jì)人會把商演的細(xì)節(jié)和報酬談好，再把合同交給明星簽。

一、定義

代理模式：為一個對象提供一個代用品或占位符，以便控制對它的訪問。
代理分為：保護(hù)代理和虛擬代理
保護(hù)代理：用于控制不同權(quán)限的對象對目標(biāo)對象的訪問，在JavaScript中很難判斷誰訪問了某個對象，所以保護(hù)代理很難實現(xiàn)。

二、圖片預(yù)加載（最常見的虛擬代理應(yīng)用場景）

圖片預(yù)加載是一種常用技術(shù)，如果直接給某個img標(biāo)簽節(jié)點設(shè)置src屬性，由于圖片過大或者網(wǎng)絡(luò)不佳，圖片的位置往往有段時間會有空白。常見的做法事先用一張loading圖片占位，然后異步加載圖片，待圖片加載完成，把其填充到img節(jié)點里。
實現(xiàn)原理：
創(chuàng)建一個Image對象：var a = new Image();
定義Image對象的src: a.src = “xxx.gif”;
這樣做就相當(dāng)于給瀏覽器緩存了一張圖片。

可通過Image對象的complete屬性來檢測圖像是否加載完成。每個Image對象都有一個complete屬性，當(dāng)圖像處于裝載過程中時，該屬性值false,當(dāng)發(fā)生了onload、onerror、onabort中任何一個事件后，則表示圖像裝載過程結(jié)束，此時complete屬性為true。

（1）非代理實現(xiàn)

var myImage = (function() {
  var imgNode = document.createElement("img");
  document.body.appendChild(imgNode);
  var img = new Image();

  img.onload = function() {
    imgNode.src = img.src;
  };

  return {
    setSrc: function(src) {
      imgNode.src = "./images/loading.gif";
      img.src = src;
    }
  }
})();

myImage.setSrc("./images/originImg.png");

（2）代理實現(xiàn)

// 創(chuàng)建圖片DOM
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);  // this指向img！img加載完成后，將img.src傳遞給myImage
  };

  return {
    setSrc: function(src) {
      myImage.setSrc("./images/loading.gif");   // loading
      img.src = src;
    }
  };
})();

proxyImage.setSrc("./images/originImg.png");

使用代理模式的好處：使每個函數(shù)功能單一，實現(xiàn)對象設(shè)計的“單一職責(zé)原則”！

三、文件同步

假設(shè)我們在做一個文件同步功能，當(dāng)選中checkbox時候，它對應(yīng)的文件就會被同步到另外一臺服務(wù)器。

<body>
    <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" />文件5
    <input type="checkbox" id="6" />文件6
  </body>

沒選中一個checkbox就同步一次，顯然不太合理。因為在web開發(fā)中，最大的開銷就是網(wǎng)絡(luò)請求。
解決方案：通過一個代理函數(shù)來收集一段時間之內(nèi)的請求，然后一次性發(fā)給服務(wù)器。

var synchronousFile = function(id) {
  console.log("開始同步文件，id為：" + id);
};

var proxySynchonousFile = (function() {
  var cache = [],   // 保存本次需要同步文件的id
    timer;     // 定時器

  return function(id) {
    cache.push(id);
    if(timer) { 
      // 不要覆蓋已經(jīng)啟動的定時
      return;
    }

    timer = setTimeout(function(){
      synchronousFile(cache.join(","));
      clearTimeout(timer);
      timer = null;
      cache.length = 0;  // 清空緩存
    }, 2000);
  }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
  c.onclick = function() {
    if(this.checked === true) {
      proxySynchonousFile(this.id);
    }
  }
}

四、緩存代理–計算乘積（序列一模一樣）

var mult = function() {
  var result = 1;
  for(var i = 0, l = arguments.length; i < l; i++) {
    result= result * arguments[i];
  }
  return result;
};

var proxyMult = (function() {
  var cache = {};   // {"1,2,3": 6}
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = mult.apply(this, arguments);
  }
})();

console.log(proxyMult(1, 2, 3));

// 改造：

var proxyFactory = function(fn) {
  var cache = {};
  return function() {
    var args = Array.prototype.join.call(arguments, ",");
    if(args in cache) {
      return cache[args];
    }
    return cache[args] = fn.apply(this, arguments);
  }  
};

console.log(proxyFactory(mult)(1, 2, 3));

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: