所謂的的代理模式就是為一個對象找一個替代對象，以便對原對象進(jìn)行訪問酗洒。
使用代理的原因是我們不愿意或者不想對原對象進(jìn)行直接操作，我們使用代理就是讓它幫原對象進(jìn)行一系列的操作，等這些東西做完后告訴原對象就行了酿矢。就像我們生活的那些明星的助理經(jīng)紀(jì)人一樣。
我們舉一個明星買鞋子的例子怎燥。
1.明星自己去買鞋瘫筐。
// 定義一個鞋子類
var Shoes = function(name){
this.name = name;
};
Shoes.prototype.getName = function() {
return this.name;
};
// 定義一個明星對象
var star = {
buyShoes: function(shoes) {
console.log('買到了一雙' + shoes.getName());
}
}
star.buyShoes(new Shoes('皮鞋')); // "買到了一雙皮鞋"
當(dāng)然了，想買鞋這種事铐姚，一般都會交給助理去做策肝。
2.明星讓助理代自己去買鞋。
// 定義一個鞋子類
var Shoes = function(name){
this.name = name;
};
Shoes.prototype.getName = function() {
return this.name;
};
// 定義一個助理對象
var assistant = {
buyShoes: function(shoes) {
star.buyShoes(shoes.getName())
}
};
// 定義一個明星對象
var star = {
buyShoes: function(name) {
console.log('買到了一雙' + name);
}
};
assistant.buyShoes(new Shoes('高跟鞋')); // "買到了一雙高跟鞋"
怎么樣隐绵，代理就是這么簡單之众，可能到這里有的同學(xué)會比較疑惑，代理的實現(xiàn)結(jié)果不是和不使用一樣嗎依许？是的棺禾，一樣的實現(xiàn)結(jié)果是必須的，但是峭跳，值用代理并不是我們看到的那樣將簡單的事情復(fù)雜化了膘婶，代理的使用場景當(dāng)然不是這種簡單的場景，而是針對一些比較復(fù)雜或特殊的情況使用蛀醉，這里只是為了舉例說明代理的實現(xiàn)悬襟。下面就介紹一些使用場景。
代理使用場景
繼續(xù)上面的明星買鞋子的問題拯刁。在生活中我們會遇到商店在營業(yè)時間脊岳，而你在工作時間，由于要掙錢同時又要花錢，所以逸绎，會找一個代理惹恃；就像春節(jié)快到了，你沒時間或者搶不到票棺牧，就會找票販子一樣巫糙；像現(xiàn)在的代購，則是你不能出國颊乘，或者對國外不了解参淹，就找能出國，對國外了解的人幫你買東西一樣乏悄。我們知道每家商店都有自己的營業(yè)時間和休息時間浙值，這里我們用（8:00~20:00）算作營業(yè)時間。
// 定義一個鞋子類
var Shoes = function(name){
this.name = name;
};
Shoes.prototype.getName = function() {
return this.name;
};
// 添加了一個business方法檩小，通過當(dāng)前的時間來判斷是否能買到鞋子开呐。
Shoes.prototype.business = function() {
var curTime = new Date().getHours();
return curTime >= 8 && curTime <= 20 ? that.getName() : '"非營業(yè)時間！"';
}
// 定義一個助理對象
var assistant = {
buyShoes: function(shoes) {
star.buyShoes(shoes.getName())
}
};
// 定義一個明星對象
var star = {
buyShoes: function(name) {
console.log('買到了一雙' + name);
}
};
assistant.buyShoes(new Shoes('高跟鞋')); // "買到了一雙高跟鞋"
保護(hù)代理
助理作為明星的代理规求，不僅可以幫助明星買東西筐付，同時還有幫助明星過濾的東西的職責(zé)，比如說阻肿，有粉絲要送明星花（不是什么樣的花都收的）瓦戚，有人要找明星代言廣告（不是什么樣的廣告都代言的）。
// 定義一個廣告類
var Ad = function(price){
this.price = price;
};
Ad.prototype.getPrice = function() {
return this.price;
};
// 定義一個助理對象
var assistant = {
init: function(ad) {
var money = ad.getPrice();
if(money > 300) {
this.receiveAd(money);
} else {
this.rejectAd();
}
},
receiveAd: function(price) {
star.receiveAd(price);
},
rejectAd: function() {
star.rejectAd();
}
};
// 定義一個明星對象
var star = {
receiveAd: function(price) {
console.log('廣告費' + price + '萬元');
},
rejectAd: function() {
console.log('拒絕小制作丛塌！');
}
};
assistant.init(new Ad(5)); // "拒絕小制作较解！"
assistant.init(new Ad(500)); // "廣告費500萬元"
像這種明星向助理授權(quán)，如：什么樣價位的廣告可以接赴邻，什么樣的鮮花可以接等等印衔。這樣將一些業(yè)務(wù)的處理交給助理或者經(jīng)紀(jì)人處理，而自己則位于幕后乍楚，無疑給自己減少了不必要的麻煩当编，這樣明星就處于一種保護(hù)狀態(tài)。在現(xiàn)實生活中的例子比比皆是徒溪，同樣在我們的程序語言開發(fā)中也是比較常見忿偷，尤其是網(wǎng)絡(luò)和進(jìn)程這方面，相信做過nodjs開發(fā)的同學(xué)或多或少會遇到臊泌。
虛擬代理
在開發(fā)中鲤桥，我們往往將 new Ad('5') 這個對象的實例化操作，放到函數(shù)內(nèi)部執(zhí)行渠概，這樣的操作會減少不必要的實例化對象的開銷茶凳，造成資源的浪費嫂拴。這種使用的情況我們將之成為虛擬代理。
下面就介紹一個常見的虛擬代理——圖片的預(yù)加載贮喧。
圖片預(yù)加載是一種常見的前端技術(shù)筒狠，由于圖片過大或者網(wǎng)絡(luò)不佳，我們不會直接給某個img標(biāo)簽節(jié)點設(shè)置src屬性箱沦，而是使用一張loading圖片作為占位符辩恼，然后用異步的方式來家在加載圖片，等到圖片加載完畢谓形，我們再把它填充到img的節(jié)點里灶伊。
var preImage = (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 = '../loading.gif';
img.src = src;
}
}
})();
preImage.setSrc('https://cn.bing.com/az/hprichbg/rb/TadamiTrain_ZH-CN13495442975_1920x1080.jpg');
到這里，圖片的預(yù)加載功能已經(jīng)實現(xiàn)寒跳，但是往往體現(xiàn)一段代碼的是否更優(yōu)秀聘萨，是看你的代碼是否易于維護(hù)，特別是對于海量的代碼童太。第一點米辐，這段代碼不符合單一職責(zé)，我們把負(fù)責(zé)圖片預(yù)加載的功能康愤，對img元素的處理放在了一個函數(shù)體內(nèi)儡循，尤其是沒有將代碼變化的部分和未變化的部分分開；第二點征冷，就是將來我們的網(wǎng)速非常好，我們不用再擔(dān)心由于網(wǎng)絡(luò)不佳而造成的顯示效果問題誓琼，那么關(guān)于圖片預(yù)加載的功能就要去掉检激。
我們可以嘗試使用代理來實現(xiàn)，代碼如下：
var myImage = (function() {
var imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
}
})();
var preImage = (function() {
var img = new Image;
img.onload = function() {
myImage.setSrc = img.src;
};
return {
setSrc: function(src) {
myImage.setSrc( '../loading.gif');
img.src = src;
}
}
})();
preImage.setSrc('https://cn.bing.com/az/hprichbg/rb/TadamiTrain_ZH-CN13495442975_1920x1080.jpg');
這樣我們就將圖片預(yù)加載和為img元素節(jié)點設(shè)置src分開來腹侣。
代理和被代理對象的一致性
因為代理要實現(xiàn)和被代理對象實際處理一樣的效果叔收，所以，在實現(xiàn)代理對象時傲隶，原對象有的方法饺律，代理對象一樣有，這樣可以保證跺株，用戶在操作代理對象時就像在操作原對象一樣复濒。
緩存代理
緩存代理就是將代理加緩存，下面是一個求和的例子：
var multAdd = function() {
var res = 0;
for (var i = 0, l = arguments.length; i < l; i++) {
res = res + arguments[i]
}
return res;
};
var proxyAdd = (function() {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ',');
if(args in cache) {
return cache[args];
}
return caches[args] = multAdd.apply(this, arguments);
}
})();
proxyAdd(1, 2, 3); // 6
proxyAdd(1, 2, 3); // 6
我們不用代理當(dāng)然也能實現(xiàn)緩存就和乒省，但是為了達(dá)到單一職責(zé)巧颈，我們可以讓multAdd實現(xiàn)求和，而緩存則放在代理中來實現(xiàn)袖扛。
當(dāng)然砸泛，還有其他的分類代理十籍，比如，智能代理唇礁，遠(yuǎn)程代理勾栗。但是在JavaScript中我們使用最多，也最常見的就是虛擬代理和緩存代理盏筐。
