代理模式是一種對程序對象進行控制性訪問的一類解決方案。
引入代理模式，其實是為了實現單一職責的面向對象設計原則。
單一職責其實就是指在一個類中（js中通常指對象和函數等），應僅有一個引起它變化的原因。這樣會幫助程序設計具有良好的健壯和高內聚特性，從而當變化發生時，程序設計會盡量少的受到意外破壞。
代理模式有多種方法，保護代理、遠程代理、虛擬代理、緩存代理等。
但在javascript中，代理模式最常用到的兩種方法是虛擬代理和緩存代理。
虛擬代理
在理解虛擬代理時，可以將其想象為一個經紀人，客戶程序需要通過這個虛擬代理(經紀人)來調用本體對象的方法。
虛擬代理示例demo1: 圖片loading預加載
//通過虛擬代理實現圖片預加載//代理模式進行圖片預加載的實現思路是： 通過代理對象獲取實際顯示圖片地址并進行加載，同時先讓本體對象顯示預加載圖片，待代理對象將實際圖片地址加載完畢后傳遞給本體對象進行顯示即可。//本體對象var myImage = (function(){ var imgNode = new Image() document.body.appendChild(imgNode) return { setSrc: function(src){ imgNode.src = src } }})()//代理對象var proxyImage = (function(){ var img = new Image(); //1、代理對象新建一個img對象 img.onload = function(){ //4、代理對象img加載真實圖片src完成后將src傳遞給本體對象顯示 myImage.setSrc(this.src) } return { setProxySrc: function(src){ myImage.setSrc('../images/loding.gif') //2、代理對象控制本體對象使用加載圖片src img.src = src //3、代理對象的img對象獲取將要傳遞給本體對象的真實圖片src } }})()//通過代理對象來對本體對象進行訪問proxyImage.setProxySrc('https://p1.ssl.qhimgs1.com/t0153297036f4471d81.jpg')虛擬代理示例demo2：合并HTTP請求，減少網絡請求資源消耗
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>代理模式 虛擬代理合并HTTP請求</title></head><body> <div> <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 <input type="checkbox" id="7" />7 <input type="checkbox" id="8" />8 <input type="checkbox" id="9" />9 </div> </body><script> //使用 //本體對象 var synchornurFile = function(id){ console.log('開始同步：' + id); } var proxySynchornurFile = (function(){ var cache = [], //集合一段時間內需要同步的id timer; //定時器 return function(id){ cache.push(id) if(timer){ //保證不會覆蓋已經啟動的定時器 return } timer = setTimeout(function(){ synchornurFile(cache.join(',')) clearTimeout(timer) timer = null cache.length = 0 }, 2000) } })() var check = document.getElementsByTagName('input') for(var i=0; i<check.length; i++){ check[i].onclick = function(){ if(this.checked === true){ proxySynchornurFile(this.id) } } }</script></html>
新聞熱點
疑難解答
圖片精選
