码迷,mamicode.com
首页 > 编程语言 > 详细

javascript设计模式学习之六——代理模式

时间:2016-07-04 22:17:41      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:

一、代理模式定义

代理模式的关键是:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问。代理模式需要和本体对外提供相同的接口,对用户来说是透明的。代理模式的种类有很多,诸如防火墙代理,保护代理(帮助过滤掉一些请求,控制不同权限的对象对目标对象的访问),虚拟代理(将一些开销很大的对象,延迟到真正需要的时候才创建),缓存代理等。在javascript中使用较多的是虚拟代理。

二、虚拟代理实现图片预加载

 在这个例子中,不使用虚拟代理固然也能够解决问题,不过采用虚拟代理之后更好地体现了单一职责原则;

    //代理模式实现图片预加载
    var myImage=(function(){
        var realImg=document.createElement(img);
        document.body.appendChild(realImg);
        return {
            setSrc:function(src){
                realImg.src=src;
            }
        };
    })();
    var proxyImg=(function(){
        var img=new Image;
        img.onload=function(){
            //myImage.setSrc(img.src);
            myImage.setSrc(this.src);
        }
        return {
            serSrc:function(src){
                myImage.setSrc("file://c:/users/Desktop/loading.gif");
                img.src=src;
            }
        };
    })();
    //调用方式
    proxyImg.setSrc(http://imgcache.qq.com/00.jpg);

三、缓存代理

缓存代理可以为一些开销大的计算提供暂时的存储,或者如ajax分页时候,同一页的数据理论上只需要去后台拉取一次,这些已经拉取过的数据在某个地方缓存之后,下一请求同一页的时候,便可以直接使用之前的数据。

    //为复杂运算实现缓存代理
    /*****计算乘积******/
    function mult(){
        var ret=1;
        for(var i=0;i<arguments.length;i++){
            ret*=arguments[i];
        }
        return ret;
    }
    
    /*****创建缓存代理的工厂*******/
    var createProxyFactory=function(fn){
        var cache={};
        return function(){
            var argStr=[].join.call(arguments);
            if(argStr in cache){
                return cache[argStr];
            }
            return cache[argStr]=fn.call(this,arguments);
        };
    };
    
    //调用示例
    var mult2=createProxyFactory(mult);
    mult2(1,2,3);//第一次计算
    mult2(1,2,3);//第二次从缓存中读取

 

javascript设计模式学习之六——代理模式

标签:

原文地址:http://www.cnblogs.com/bobodeboke/p/5641737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!