摘要：虛擬代理在開發(fā)中，我們往往將這個對象的實例化操作，放到函數(shù)內(nèi)部執(zhí)行，這樣的操作會減少不必要的實例化對象的開銷，造成資源的浪費。這種使用的情況我們將之成為虛擬代理。但是在中我們使用最多，也最常見的就是虛擬代理和緩存代理。

所謂的的代理模式就是為一個對象找一個替代對象，以便對原對象進(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("高跟鞋")); // "買到了一雙高跟鞋"

助理作為明星的代理，不僅可以幫助明星買東西，同時還有幫助明星過濾的東西的職責(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中我們使用最多，也最常見的就是虛擬代理和緩存代理。

設(shè)計模式周周講