JavaScript - 设计模式 - 代理模式

代理模式优点:执行花销较大操作时,通过代理监听,当需要真正操作时再转交请求给本体(也就是延迟执行)。

1. 缓存代理:添加缓存,避免重复操作
function sum(){
    var args = arguments;
    var s = 0;
    for(var i = 0;i < args.length;i++){
        s += args[i];
    }
    return s;
}
var proxySum = function(){
    var cache = {};
    return function(){
        var args = Array.prototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }else{
            cache[args] = sum.apply(this,arguments);
            return cache[args];
        }
    };
}
console.log(proxySum()(1,2,3,4,5));// 15
  • 扩展代理函数
var proxy = function(fn){
    var cache = {};
    return function(){
        var args = Array.prototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }else{
            cache[args] = fn.apply(this,arguments);
            return cache[args];
        }
    };
}
2.虚拟代理实现图片预加载
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();
    img.onload = function(){
        myImage.setSrc(this.src);
    };
    return {
       setSrc: function(src) {
                 myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
                 img.src = src;
              }
            }
})();
ProxyImage.setSrc("https://i0.hdslb.com/bfs/album/165fa0d9744dd1c9b476a1cd6432f7151fe9c8fc.jpg");

你可能感兴趣的:(JavaScript - 设计模式 - 代理模式)