JavaScript中的代理模式

什麼是代理模式？

在現實生活中，可以找到很多使用了代理模式的場景。例如：我想要去租房，一般的做法是不是找個中介，給你介紹房子，這樣你可以節約很多的時間和精力，而這時候中介就是代理；如果有商家想找某某明星打廣告，是不是一般先找這個明星的經紀人，和這個經紀人商量好一些片酬和細節，而後在把這個合同（結果）交給明星，而這個經紀人就是代理。

定義： 代理模式給某一個對象提供一個代理對象，並由代理對象控制對原對象的引用。通俗的來講代理模式就是我們生活中常見的中介、經紀人之類的。

不使用代理：

使用代理模式：

代理的優點

• 用戶可以放心不用關心（本體），放心使用代理，而他只關心是否能得到想要結果而已
• 在任何時候本體的地方都可以替換成使用代理

注意：

在我們寫代碼的時候往往不需要提前就使用代理模式，而是當我們感覺真正的不方便訪問某個對象的時候，我們在寫上代理模式也不遲。

在 JavaScript 中最常使用的是虛擬代理和緩存代理。

虛擬代理

定義

將一些我們開銷很大的對象，延遲到真正需要它的時候纔去創建。

舉個例子吧：就在我們寫過的前幾篇博客中的《單例模式》中有個實例，當我們的用戶需要註冊的時候纔去創建它，並且只創建一次！

var createDiv = function(){
    var div = document.createElement('div');
    div.innerText = '這是一個註冊浮框';
    return div;
    // 注：裏面的東西我就不寫了，自己腦補
}
var proxyCreateDiv = (function(){
    var obj;
    return function() {
        arguments = [].slice.call(arguments);
        return obj || (obj = arguments.shift().apply(this,arguments))
    }
})()
let x = proxyCreateDiv(createDiv);
let y = proxyCreateDiv(createDiv);
console.log(x === y)

緩存代理

我們做一個加法計算器，這個計算器有一個緩存功能，可以將用戶計算過的數據緩存起來

var mult = function () {
    console.log('開始計算乘積');
    var a = 1;
    for (var i = 0, l = arguments.length; i < l; i++){
        a = a * arguments[i];
    }
    return a;
}
var proxMult = (function(){
    var cache = {};
    return function(){
        var args = [].join.call(arguments,',');
        if (args in cache){
            return cache[args];
        }
        return cache[args] = mult.apply(this,arguments);
    }
})()
console.log(proxMult(2,3));
console.log(proxMult(2,3));
console.log(proxMult(2,3,4));

其實代理模式有很多分類，但是不要被嚇到了，它們都是運用上面的一個思想，拿一個對象作爲代理來控制訪問本體，從而把結果返回給用戶，僅僅只是實現的功能不同而已

參考資料：

• JavaScript 設計模式與開發實踐