代理模式

解决哪一类问题

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

实现原理

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

虚拟代理

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

缓存代理

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

    // 假设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. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  2. Leetcode: Circular Array Loop

    You are given an array of positive and negative integers. If a number n at an index is positive, the ...

  3. git commit 代码时提示： Warning: Your console font probably doesn‘t support Unicode.

    git 提交代码是会遇到以下问题, git commit 代码时提示: Warning: Your console font probably doesn‘t support Unicode. If ...

  4. java类

    1.四种访问控制符 private.不指明.protected.public 2.构造函数没有返回值 是因为构造函数默认返回的是类的实例对象.所以不需要写返回值 3.static static表示类拥 ...

  5. 浅谈大型web系统架构

    动态应用,是相对于网站静态内容而言,是指以c/c++.php.Java.perl..net等服务器端语言开发的网络应用软件,比如论坛.网络相册.交友.BLOG等常见应用.动态应用系统通常与数据库系统. ...

  6. hdu5714 拍照[2016百度之星复赛C题]

    由于船移动的速度都一样,那么对于往一个方向的船相对距离其实是不变的,我们可以把往一个方向移动的船都视作静止,并求出在哪些观测位置可以看到,很明显对于船[x,y,z],当x+z>=y-z的时候,可 ...

  7. 1047: 小A的计算器

    1047: 小A的计算器 时间限制: 1 Sec  内存限制: 128 MB提交: 124  解决: 105[提交][状态][讨论版] 题目描述 以往的操作系统内部的数据表示都是二进制方式,小A新写了 ...

  8. 夺命雷公狗-----React_native---3---react-native-cli的安装

    我们用npm安装下react-native-cli,并用-g来全局安装,我们用命令 npm install -g react-native-cli 如果和下图一样即表示已安装成功:

  9. C++之动态数组

    C99支持一种名为变长数组的结构来方便程序员.C++也提供了一种长度可在程序运行时确定的数组类型:动态数组.声明格式为:(声明 int 类型的数组) ; //此处可修改 ArraySize 的值 in ...

  10. 《zw版·Halcon入门教程与内置demo》

    <zw版·Halcon入门教程与内置demo> halcon系统的中文教程很不好找,而且大部分是v10以前的版本. 例如,QQ群: 247994767(Delphi与halcon), 共享 ...