使用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的到底在写一些什么，好了看看结果：

还行，对吧。（哈哈哈哈哈。。。呃，卡住了）；