使用JavaScript淺談代理模式

什么是代理模式？

代理模式的定義是：為一個對象提供一個代用品或者占位符，以便控制對它的訪問。

看一段代碼：

function getSomething(value) {
    if (value > 10) {
        return value * 2;
    }
}

在這里我們定義了一個函數，如果傳入的值大於10，那么我們就返回它的2倍的值。嗯。。。挺好的，但是有不足之處。函數做了過多的事情，我們的目的就是獲取參數的2倍值，在這里做了條件判斷。（當然在這里並沒有什么影響，我只是舉一個簡單的例子），我們希望的這個函數就是返回值就行了。

在看一段代碼：

function getSomething(value) {
    return value * 2;
}
function proxtGet(value) {
    if (value <10) return;
    return getSomething(value);
}

現在我們分離了getSomething的功能，判斷用proxyGet來做，那么getSomething就安安心心的做自己的事情了。

其實就是一種保護代理，對目標對象我們提供了proxyGet方法進行保護，只有符合條件的才能操作它。

假如有一天不需要做判斷了，那么我們就直接調用getSomething就可以的到結果，看多方便。

下面介紹一下虛擬代理：

在web開發中，開銷最大的無疑是網絡請求，假設我們有一個列表，代表的是后台文件信息，我們點擊一個列表，就要向后台發送打包文件的請求，對於擁有麒麟臂的你來說，這樣的網絡開銷就是一場噩夢（假設這個操作的實時性要求不是很高），那么我們就可以這樣子來操作，來減小開銷：

function sendFile(files) {
    // 做一些操作，然后發送文件信息給后台
    console.log('發送成功');
}

var  proxySendFile = (function () {

 var caches = []; var timer = null; return function (file) { caches.push(file); if (timer) { return }; timer = setTimeout(function () { sendFile(caches); clearInterval(timer); timer = null; caches.length = 0; }, 2000) } }

)()

在這里sendFile是發送文件的操作，我們使用proxySendFIle來代理發送文件的操作，2000只發起一次請求，你說可以不可以。就算你的麒麟臂已經無人可擋，在這里你跟別人沒有區別。

下面我們給出一個用代理模式優化異步請求的操作：

var proxyAjax = (
    function () {
        var caches = {};
        return function (param, callback) {
            if (caches[param]) { callback(caches[param]); console.log('有結果直接返回'); return; };
            // 模擬異步請求
            sendData(param, function (data) {
                caches[param] = data;
                callback(data);
                console.log('后台獲取');
            });

        }
    }
)();
function sendData(param, callback) {
    setTimeout(function () {
        callback(param + Math.random());
    }, 1000);
}
function ajax(param, callback) {
    proxyAjax(param, callback);
}

ajax('A', function (data) {
    console.log(data);
});
setTimeout(function () {
    ajax('A', function (data) {
        console.log(data);
    });
}, 2000)

在這里我們用proxyAjax代理了ajax的請求，當然這里只是簡單的模擬，具體的還需要優化，聰明的你因該能看的懂我tm的到底在寫一些什么，好了看看結果：

 

還行，對吧。（哈哈哈哈哈。。。呃，卡住了）；