设计模式——代理模式

代理模式是为一个对象提供一个代用品或占位符，以便控制对它的控制

一、虚拟代理实现图片预加载

图片预加载：如果直接给某个 img 标签节点设置 src 属性，由于图片过大或网络不佳，图片的位置往往有段时间会是一片空白。常见的做法是先用一张 loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到 img 节点，这种场景适合使用虚拟代理。

例：通过代理对象，在图片被真正加载好之前，页面中会出现另一张图片占位，来提示用户图片正在加载

var 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();
    // onload 事件会在页面或图像加载完成后立即发生
    img.onload=function(){
        myImage.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            myImage.setSrc("file:// C:/Users/lenovo/Pictures/Saved Pictures/kun");
            img.src=src;
        }
    }
})();
proxyImage.setSrc("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3197405485,3352022710&fm=26&gp=0.jpg");

说明：

• 设置myImage的src为本地图片，代理img的src为远程图片，在代理img的onload 事件（图像加载完成后），将myImage的src为代理img的src
• 代理的意义：代理负责预加载图片，预加载的操作完成之后，把请求重新交给本体myImage
• 给img节点设置src和图片预加载被隔离在两个对象里，它们可以各自变化而不影响对方

二、缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的元素那结果。

例：计算乘积

var mult=function(){
    var a=1;
    for(var i= 0,len=arguments.length;i<len;i++){
        a=a*arguments[i];
    }
    return a;
};
var proxyMult=(function(){
    var cache={};
    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, 4));  //24
console.log(proxyMult(1, 2, 3, 4));  //24

• 当我们第二次调用proxyMult(1, 2, 3, 4)时，本体mult函数并没有被计算，proxyMult直接返回了之前缓存好的计算结果。

三、用高阶函数动态创建代理

//计算乘积
var mult=function(){
    var a=1;
    for(var i= 0,len=arguments.length;i<len;i++){
        a=a*arguments[i];
    }
    return a;
};
//计算加和
var plus=function(){
    var a=0;
    for(var i= 0,len=arguments.length;i<len;i++){
        a=a+arguments[i];
    }
    return a;
};
//创建缓存代理的工厂
var createProxy=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);
    }
};
var proxyMult=createProxy(mult),
        proxyPlus=createProxy(plus);
console.log(proxyMult(1, 2, 3, 4));  //24
console.log(proxyPlus(1, 2, 3, 4));  //10