JS设计模式-代理模式

马龙驹发布于2019-08-21 16:54 / 2781人阅读

摘要：代理模式的定义为其他对象提供一种代理以控制对这个对象的访问。代理模式在客户端和目标对象之间起到一个中介作用，这样可以起到保护目标对象的作用。代理对象也可以对目标对象调用之前进行其他操作。

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

原文链接

虚拟代理

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

图片懒加载

//图片加载
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);
    }
})();

优缺点

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

缺点：增加了系统的复杂度

GPU云服务器云服务器代理模式 Java设计模式之（五）——代理模式静态代理模式 java代理模式用处

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88893.html

js设计模式 --- 代理设计模式

摘要：代理设计模式代理模式为其他对象提供一种代理以控制对这个对象的访问。代理模式是常见的设计模式之一是指不直接调用实际的对象，而是通过代理对象，来间接的调用实际的对象。对象类定义了代理对象所代表的目标对象。代理设计模式代理模式：为其他对象提供一种代理以控制对这个对象的访问。代理模式是常见的设计模式之一,是指不直接调用实际的对象，而是通过代理对象，来间接的调用实际的对象。为什么要采用这种间...

Tonny 2019-08-26 11:46 评论0 收藏0
JS代理模式《JavaScript设计模式与开发实践》阅读笔记

摘要：保护代理和虚拟代理保护代理当有许多需求要向某对象发出一些请求时，可以设置保护代理，通过一些条件判断对请求进行过滤。虚拟代理在程序中可以能有一些代价昂贵的操作。而虚拟代理是最常用的一种代理模式。代理模式代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。保护代理和虚拟代理保护代理：当有许多需求要向某对象发出一些请求时，可以设置保护代理，通过一些条件判断对请求进行过滤。...

mist14 2019-08-22 17:57 评论0 收藏0
JS设计模式之代理模式

摘要：什么是代理模式代理模式，类似于明星的经纪人，想要拜访明星，需要先通过经纪人的沟通。不同于装饰器，那种动态加载一个对象，可以说在代理模式当中，代理是早已既定的。又称单一功能原则，面向对象五个基本原则之一。什么是代理模式代理模式，类似于明星的经纪人，想要拜访明星，需要先通过经纪人的沟通。而在JS当中，如果想访问一个类，需要通过另一个类来间接访问。不同于装饰器，那种动态加载一个对象，可...

widuu 2019-08-22 11:04 评论0 收藏0
每天一个设计模式·代理模式

摘要：代理模式原文地址更多设计模式系列教程更多免费教程博主按每天一个设计模式旨在初步领会设计模式的精髓，目前采用靠这吃饭和纯粹喜欢两种语言实现。代理模式优缺点代理模式有高度解耦对象保护易修改等优点。代理模式·原文地址更多《设计模式系列教程》更多免费教程博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（_靠这吃饭_）和python（_纯粹喜欢_）...

XiNGRZ 2019-08-23 13:42 评论0 收藏0
每天一个设计模式·代理模式

摘要：代理模式原文地址更多设计模式系列教程更多免费教程博主按每天一个设计模式旨在初步领会设计模式的精髓，目前采用靠这吃饭和纯粹喜欢两种语言实现。代理模式优缺点代理模式有高度解耦对象保护易修改等优点。代理模式·原文地址更多《设计模式系列教程》更多免费教程博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（_靠这吃饭_）和python（_纯粹喜欢_）...

MasonEast 2019-07-30 18:34 评论0 收藏0