代理模式

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

例子一 图片预加载

  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');

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

  • 单一职责原则:就一个类来说,应该仅有一个引起它变化的原因。如果一个对象承担了多项责任,就意味着对象将变得巨大,引起它变化的原因可能会有多个。如果一个对象承担的职责过多,等于把这些职责耦合到了一起,这种耦合会导致脆弱和低内聚的设计。
  • 可能会违反开放-封闭原则。如果我们需要加载的图片很小,或许以后网速快到不用预加载了,我们可能希望删掉预加载的功能,这个时候,我们就不得不去更改myImage里面的代码了。

实际上,我们需要的只是给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

你可能感兴趣的:(代理模式)