代理模式

解决哪一类问题

从字面意思上理解，代理模式解决对一个对象的直接访问，这种直接访问可能是"不方便"的，所谓"不方便"可能是直接访问成本比较大(在前端领域通常是要获取后台数据或者执行复杂的计算)，或者需要对原始对象进行一些修饰或处理。

实现原理

实现一个代理对象，这个代理对象和原对象对外暴露相同的接口，用户直接操作代理对象，对于说对用户是透明的，用户并不知道有代理存在。

虚拟代理

把一些昂贵的操作放在代理对象中进行，现在体会的还不是很深刻，具体例子没想好，以后补充。

缓存代理

把昂贵操作产生的数据缓存在代理对象中，避免了重复操作

    // 假设a*b是个昂贵的操作

    function calculate(a, b) {

        return a*b

    }

    var proxyCalculate = (function() {

        var cache = {}

        return function(a, b) {

            var ab = '' + a + '_' + b

            if (ab in cache) {

                return cache[ab]

            }

            return cache[ab] = calculate(a, b)

        }

    })()

    var a = 99999, b = 99999

    proxyCalculate(a, b)

实践中的应用

利用代理来做节流操作

直接copy书上的代码

假设我们在做一个文件同步的功能，当我们选中一个 checkbox 的时候，它对应的文件就会被同 步到另外一台备用服务器上面，当我们选中 3 个 checkbox 的时候，依次往服务器发送了 3 次同步文件的请求,

可以预见，如此频繁的网络请求将会带来相当大的开销。

<body>

    <input type="checkbox" id="1"></input>1

    <input type="checkbox" id="2"></input>2

    <input type="checkbox" id="3"></input>3

    <input type="checkbox" id="4"></input>4

    <input type="checkbox" id="5"></input>5

    <input type="checkbox" id="6"></input>6

    <input type="checkbox" id="7"></input>7

    <input type="checkbox" id="8"></input>8

    <input type="checkbox" id="9"></input>9

</body>


    var synchronousFile = function( id ){

        console.log( '开始同步文件，id 为: ' + id );

    };

    var proxySynchronousFile = (function(){

    var cache = [], // 保存一段时间内需要同步的 ID

        timer; // 定时器

    return function( id ){

        cache.push( id );

        if (timer){ // 保证不会覆盖已经启动的定时器

            return;

        }

        timer = setTimeout(function(){

            synchronousFile( cache.join( ',' ) );

            clearTimeout( timer ); // 清空定时器 timer = null;

            cache.length = 0; // 清空 ID 集合

        }, 2000 );

    }// 2 秒后向本体发送需要同步的 ID 集合

    })();

    var checkbox = document.getElementsByTagName( 'input' );

    for ( var i = 0, c; c = checkbox[ i++ ]; ){

        c.onclick = function(){

            if (this.checked === true){

                proxySynchronousFile( this.id );

            }

        }

    }

js设计模式总结-代理模式的更多相关文章

  1. js设计模式——1.代理模式

    js设计模式——1.代理模式 以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...

  2. js设计模式之代理模式以及订阅发布模式

    为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文 ...

  3. JS 设计模式六 -- 代理模式

    概念 为一个对象提供一个代用品或占位符,以便控制对它的访问. 当客户不方便直接访问一个对象的时候,需要提供一个替身对象来控制对这个对象的访问. 替身对象对请求做出一些处理之后, 再把请求转交给本体对象 ...

  4. 浅谈js设计模式之代理模式

    代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景.比如,明星都有经纪人作为代理.如果想请明星来办一场商业演出,只能联系他的经纪人.经纪人会把商业演出的细节和报酬都谈好之后,再把合同交 ...

  5. C#设计模式(13)——代理模式（Proxy Pattern）

    一.引言 在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代 ...

  6. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  7. 乐在其中设计模式(C#) - 代理模式(Proxy Pattern)

    原文:乐在其中设计模式(C#) - 代理模式(Proxy Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 代理模式(Proxy Pattern) 作者:webabcd 介绍 为 ...

  8. Java设计模式之代理模式（静态代理和JDK、CGLib动态代理）以及应用场景

    我做了个例子 ,需要可以下载源码:代理模式 1.前言: Spring 的AOP 面向切面编程,是通过动态代理实现的, 由两部分组成:(a) 如果有接口的话 通过 JDK 接口级别的代理 (b) 如果没 ...

  9. 设计模式之代理模式之二(Proxy)

    from://http://www.cnblogs.com/xwdreamer/archive/2012/05/23/2515306.html 设计模式之代理模式之二(Proxy)   0.前言 在前 ...

随机推荐

  1. 使用SpringMVC集成SpringSession的问题

    最近在使用SpringSession时遇到一个问题,错误日志如下: Exception sending context initialized event to listener instance o ...

  2. Contributing to the C++ Core Guidelines

    Contributing to the C++ Core Guidelines "Within C++ is a smaller, simpler, safer language strug ...

  3. SP2-0618: 无法找到会话标识符。启用检查 PLUSTRACE 角色 SP2-0611: 启用 STATISTICS 报告时出错

    援引: SP2-0618: 无法找到会话标识符.启用检查 PLUSTRACE 角色 SP2-0611: 启用 STATISTICS 报告时出错 问题描述及解决方法: SQL*Plus: Release ...

  4. WebSocket///////////////////////z

    作者:Ovear链接:http://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有,转载请联系作者获得授权. 一.WebSoc ...

  5. 关于hasNextInt判断后无限循环输出else项的解决办法

    话不多说,上来就是干! import java.util.Scanner; public class Test_hasNextInt { /** * @param args */ public sta ...

  6. AjaxStudyNote

    AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...

  7. Javascript模块化编程（二）：AMD规范（转）

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  8. PeopleSoft Home Subdirectories

    PeopleSoft Home Subdirectories appserv — home to the Application Server and Process Scheduler Server ...

  9. Android 开发基础及环境配置

    2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...

  10. X86 Booting Sequence

    1.BIOS 0xFFFF0 電源正常啟動後,x86 CPU 會先執行 0xFFFF0,也就是 BIOS ROM 的進入點.由於 0xFFFF0 ~ 0xFFFFF 只有少的很可憐的 16 bytes ...