代理模式

2017-01-10  本文已影响12人  Tiny_z

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

例子一 图片预加载

  var myImage = (function(){
        var imgNode = document.createElement('img');
        imgNode.className = '123';
        document.body.appendChild(imgNode);
        return {
            setSrc : function(src){
                imgNode.src = src;
            }
        }
    })();

    var proxyImage = (function(){
        var img = document.createElement('img');
        img.onload = function(){
            console.log(this);//这里的this,指向的是上面创建的img,不是imgNode
            myImage.setSrc(this.src);
        }
        return {
            setSrc : function(src){
                myImage.setSrc('http://o8kanx15h.bkt.clouddn.com/0.jpg');
                img.src = src;
            }
        }
    })();

    proxyImage.setSrc('http://o8kanx15h.bkt.clouddn.com/octoliberty.png');

下面是不使用代理模式

  var myImage = (function(){
        var imgNode = document.createElement('img');
        imgNode.className = '123';
        document.body.appendChild(imgNode);

        var img = new Image;
        img.onload = function(){
            imgNode.src = img.src;
        }
        return {
            setSrc : function(src){
                imgNode.src = 'http://o8kanx15h.bkt.clouddn.com/0.jpg';
                img.src = src;
            }
        }
    })();

    myImage.setSrc('http://o8kanx15h.bkt.clouddn.com/octoliberty.png');

那么为什么要使用代理模式呢,这么小的功能貌似不用模式也能实现,原因有下面几点

实际上,我们需要的只是给img节点设置src,预加载只是一个锦上添花的功能。这里把预加载功能放到另一个对象里(代理)。这个时候,代理负责预加载,预加载成功后,把请求重新交给本体myImage

例子二 计算乘积

  var mult = function(){
        console.log('开始');
        var a = 1;
        for(var i = 0,l = arguments.length;i < l; 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);
        }
    })();
    proxyMult(1,2,3,4);//开始 24
    proxyMult(1,2,3,4);//24
上一篇 下一篇

猜你喜欢

热点阅读