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设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 2021-11-17 - 学习记录

    适配器模式 - js: 代理模式 - js 组合模式 - js

  • JS设计模式-代理模式

    虚拟代理 虚拟代理是把一些开销很大的对象,延迟到真正需要它的时候才去创建执行 图片懒加载 合并http请求 如果有...

  • JS设计模式-代理模式

    介绍 使用者无权访问目标对象 中间加代理,通过代理做授权和控制比如说公司的内网,当我们在家的时候也是需要一个代理才...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • Mybatis代理设计模式(Proxy)与编程实现原理

    最易懂设计模式解析适配器设计模式模板方法设计模式Mybatis多级代理 1. 认识代理模式 1.1 模式定义 给某...

  • 模板方法设计模式(Template Method)

    最易懂设计模式解析适配器设计模式Mybatis代理设计模式Mybatis多级代理 1. 认识模板方法模式 1.1 ...

  • 适配器设计模式(Adapter)

    最易懂设计模式解析模板方法设计模式Mybatis代理设计模式Mybatis多级代理 1. 认识适配器模式 1.1 ...

  • 理解java的代理模式和动态代理

    代理模式 代理模式是23种设计模式之一,属于结构型模式。代理模式是最常见也是最常用的模式之一,只不过有很多设计模式...

网友评论

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

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