JS设计模式-代理模式

作者: bestvist | 来源:发表于2017-10-07 11:56 被阅读94次

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

    虚拟代理

    虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行

    图片懒加载

    //图片加载
    let imageEle = (function(){
        let node = document.createElement('img');
        document.body.appendChild(node);
        return {
            setSrc:function(src){
                node.src = src;
            }
        }
    })();
    
    //代理对象
    let proxy = (function(){
        let img = new Image();
        img.onload = function(){
            imageEle.setSrc(this.src);
        };
        return {
            setSrc:function(src){
                img.src = src;
                imageEle.setSrc('loading.gif');
            }
        }
    })();
    
    proxy.setSrc('example.png');
    

    合并http请求

    如果有一个功能需要频繁进行请求操作,这样开销比较大,可以通过一个代理函数收集一段时间内请求数据,一次性发出

    //上传请求
    let upload = function(ids){
        $.ajax({
            data: {
                id:ids
            }
        })
    }
    
    //代理合并请求
    let proxy = (function(){
        let cache = [],
            timer = null;
        return function(id){
            cache[cache.length] = id;
            if(timer) return false;
            timer = setTimeout(function(){
                upload(cache.join(','));
                clearTimeout(timer);
                timer = null;
                cache = [];
            },2000);
        }  
    })();
     
    // 绑定点击事件
    let checkbox = document.getElementsByTagName( "input" );
    for(var i= 0, c; c = checkbox[i++];){
        c.onclick = function(){
            if(this.checked === true){
                proxy(this.id);
            }
        }
    }
    

    缓存代理

    缓存代理可以作为一些开销大的运算结果提供暂时的存储,下次运算时,如果传递进来的参数跟之前一致,则可以直接返回前面存储的运算结果

    //计算乘积
    let mult = function(){
        let result = 1;
        for(let i = 0,len = arguments.length;i < len;i++){
            result*= arguments[i];
        }
        return result;
    }
    
    //缓存代理
    let proxy = (function(){
        let cache = {};
        reutrn function(){
            let args = Array.prototype.join.call(arguments,',');
            if(args in cache){
                return cache[args];
            }
            return cache[args] = mult.apply(this,arguments);
        }
    })();
    

    优缺点

    • 优点:代理模式能将代理对象与被调用对象分离,降低了系统的耦合度。代理模式在客户端和目标对象之间起到一个中介作用,这样可以起到保护目标对象的作用。代理对象也可以对目标对象调用之前进行其他操作。
    • 缺点:增加了系统的复杂度

    相关文章

      网友评论

        本文标题:JS设计模式-代理模式

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