美文网首页
设计模式之代理模式

设计模式之代理模式

作者: Binaryify | 来源:发表于2016-03-26 23:52 被阅读17次

    代理模式:

    代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。

    模式作用:

    1. 远程代理(一个对象将不同空间的对象进行局部代理)
    2. 虚拟代理(根据需要创建开销很大的对象如渲染网页暂时用占位图代替真图)
    3. 安全代理(控制真实对象的访问权限)
    4. 智能指引(调用对象代理处理另外一些事情如垃圾回收机制)

    注意事项:

    1. 不能滥用代理,有时候仅仅是给代码增加复杂度

    例子1:

    //代理模式需要3方
    //1.买家
    function maijia(name){
        this.name=name;
    }
    // 2.中介 卖房
    function zhongjie(){
    }
    zhongjie.prototype.maifang=function(){
        new fangdong(new maijia("小明")).maifang('20万');
    }
    // 3.房东 坐等收钱
    function fangdong(maijia){
        this.maijia_name=maijia.name;
        this.maifang=function(money){
            console.log("收到了来自["+this.maijia_name+"]"+money+"人民币");
        }
    }
    (new zhongjie).maifang();//收到了来自[小明]20万人民币
    

    例子2:

    虚拟代理实现图片预加载

    虚拟代理是把一些开销很大的对象,延迟到真正需要到它的时候才去创建
    在web开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的往往有段时间会是一片空白.常用的做法是先用一张loading图片占位,然后用异步的方式加载图片,等图片加在好了再把它填充到img节点了,这种场景就很适合使用虚拟代理

    var myImage=(function(){
        var imgNode=new Image();
        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('loading.gif');
                img.src=src;
            }
        }
    })()
    proxyImage.setSrc("http://www.baidu.com/img/bdlogo.png")
    

    相关文章

      网友评论

          本文标题:设计模式之代理模式

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