JavaScript设计模式--代理模式

一、定义

代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。
代理分为：保护代理和虚拟代理
保护代理：用于控制不同权限的对象对目标对象的访问，在 JavaScript 中很难判断谁访问了某个对象，所以保护代理很难实现。

二、图片预加载（最常见的虚拟代理应用场景）

图片预加载是一种常用技术，如果直接给某个 img 标签节点设置 src 属性，由于图片过大或者网络不佳，图片的位置往往有段时间会有空白。

常见的做法事先用一张 loading 图片占位，然后异步加载图片，待图片加载完成，把其填充到 img 节点里。

实现原理：
创建一个 Image 对象：var a = new Image();
定义 Image 对象的 src: a.src = “xxx.gif”;
这样做就相当于给浏览器缓存了一张图片。

可通过 Image 对象的 complete 属性来检测图像是否加载完成。每个 Image 对象都有一个 complete 属性，当图像处于装载过程中时，该属性值 false,当发生了 onload、onerror、onabort 中任何一个事件后，则表示图像装载过程结束，此时 complete 属性为 true。

（1）非代理实现

var myImage = (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 = "./images/loading.gif";
            img.src = src;
        }
    }
})();

myImage.setSrc("./images/originImg.png");

（2）代理实现

// 创建图片
DOMvar myImage = (function() {
    var imgNode = document.createElement("img");
    document.body.appendChild(imgNode);    return {
        setSrc: function(src) {
            imgNode.src = src;
        }
    };
})();// 代理
var proxyImage = (function() {
    var img = new Image();

    img.onload = function() {
        myImage.setSrc(this.src);
 // this指向img！img加载完成后，将img.src传递给myImage
    };    return {
        setSrc: function(src) {
            myImage.setSrc("./images/loading.gif");
 // loading
            img.src = src;
        }
    };
})();

proxyImage.setSrc("./images/originImg.png");

使用代理模式的好处：使每个函数功能单一，实现对象设计的“单一职责原则”！

三、文件同步

假设我们在做一个文件同步功能，当选中 checkbox 时候，它对应的文件就会被同步到另外一台服务器。

        文件1
        文件2
        文件3
        文件4
        文件5
        文件6
    

没选中一个 checkbox 就同步一次，显然不太合理。因为在 web 开发中，最大的开销就是网络请求。
解决方案方案：通过一个代理函数来收集一段时间之内的请求，然后一次性发给服务器。

var synchronousFile = function(id) {
    console.log("开始同步文件，id为：" + id);
};var proxySynchonousFile = (function() {
    var cache = [],     // 保存本次需要同步文件的id
        timer;          // 定时器

    return function(id) {
        cache.push(id);        if(timer) {
            // 不要覆盖已经启动的定时
            return;
        }

        timer = setTimeout(function(){
            synchronousFile(cache.join(","));
            clearTimeout(timer);
            timer = null;
            cache.length = 0;   // 清空缓存
        }, 2000);
    }
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c;
c = checkboxs[i]; i++) {
    c.onclick = function() {
        if(this.checked === true) {
            proxySynchonousFile(this.id);
        }
    }
}

四、缓存代理–计算乘积（序列一模一样）

var mult = function() {
    var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
        result= result * arguments[i];
    }    return result;
};var proxyMult = (function() {
    var cache = {};
// {"1,2,3": 6}
    return function() {
        var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {            return cache[args];
        }        return cache[args] = mult.apply(this, arguments);
    }
})();

console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
    var cache = {};    return function() {
        var args = Array.prototype.join.call(arguments, ",");
 if(args in cache) {            return cache[args];
        }        return cache[args] = fn.apply(this, arguments);
    }
};

console.log(proxyFactory(mult)(1, 2, 3));