代理模式是一種對程序對象進行控制性訪問的一類解決方案。
引入代理模式，其實是為了實現單一職責的面向對象設計原則。
單一職責其實就是指在一個類中（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>
緩存代理
緩存代理可以為一些開銷大的運算結果提供暫時存儲，在下次運算時，如果傳遞進來的參數和之前的一致，則可以直接返回前面存儲的結果
緩存代理示例demo: 計算乘積
<!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>代理模式-緩存代理</title>
</head>
<body>
<input type="text" id="input1">*
<input type="text" id="input2">
<div id="result"></div>
<button type="button" id="btn">計算</button>
</body>
<script>
//緩存代理示例： 計算乘積
//本體對象
var calculate = function(){
var a = 1;
for(var i=0; i<arguments.length; i++){
a = a*arguments[i]
}
return a;
}
//代理對象，創建緩存代理的工廠,參數fn可以為任意需要進行代理的函數，除了上述計算乘積的本體對象函數外，還可以是計算加減或進行其他操作的本體函數
var proxyCalculate = function(fn){
var resultCache = {};
return function(){
var args = Array.prototype.join.call(arguments, ',')
if(args in resultCache){ //測試對象中是否有對應的name，有則直接返回該name的值
return resultCache[args]
}
return resultCache[args] = fn.apply(this, arguments)
}
}
document.getElementById('btn').onclick = function(){
var v1 = document.getElementById('input1').value
var v2 = document.getElementById('input2').value
var result = proxyCalculate(calculate)(v1, v2)
document.getElementById('result').innerHTML = result
}
//總結： 代理模式還有多種，比如保護代理、遠程代理等，但js中常用的代理模式有虛擬代理和緩存代理兩種。
</script>
</html>
在編寫業務代碼時，并不需要一開始就考慮是否使用代理模式，只要當發現使用代理模式更方便時，再編寫代理對象即可。
以上所述是小編給大家介紹的javascript設計模式三：代理模式詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
