美文网首页
代理模式

代理模式

作者: Tiny_z | 来源:发表于2017-01-10 20:54 被阅读12次

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

    例子一 图片预加载

      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
    

    相关文章

      网友评论

          本文标题:代理模式

          本文链接:https://www.haomeiwen.com/subject/atnhbttx.html