代理模式

解决哪一类问题

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

实现原理

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

虚拟代理

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

缓存代理

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

    // 假设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设计模式总结-代理模式的更多相关文章

js设计模式——1.代理模式
js设计模式——1.代理模式以下是代码示例 /*js设计模式——代理模式*/ class ReadImg { constructor(fileName) { this.fileName = file ...
js设计模式之代理模式以及订阅发布模式
为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文 ...
JS 设计模式六 -- 代理模式
概念为一个对象提供一个代用品或占位符,以便控制对它的访问. 当客户不方便直接访问一个对象的时候,需要提供一个替身对象来控制对这个对象的访问. 替身对象对请求做出一些处理之后, 再把请求转交给本体对象 ...
浅谈js设计模式之代理模式
代理模式是一种非常有意义的模式,在生活中可以找到很多代理模式的场景.比如,明星都有经纪人作为代理.如果想请明星来办一场商业演出,只能联系他的经纪人.经纪人会把商业演出的细节和报酬都谈好之后,再把合同交 ...
C#设计模式(13)——代理模式（Proxy Pattern）
一.引言在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代 ...
JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
乐在其中设计模式(C#) - 代理模式(Proxy Pattern)
原文:乐在其中设计模式(C#) - 代理模式(Proxy Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 代理模式(Proxy Pattern) 作者:webabcd 介绍为 ...
Java设计模式之代理模式（静态代理和JDK、CGLib动态代理）以及应用场景
我做了个例子 ,需要可以下载源码:代理模式 1.前言: Spring 的AOP 面向切面编程,是通过动态代理实现的, 由两部分组成:(a) 如果有接口的话通过 JDK 接口级别的代理 (b) 如果没 ...
设计模式之代理模式之二(Proxy)
from://http://www.cnblogs.com/xwdreamer/archive/2012/05/23/2515306.html 设计模式之代理模式之二(Proxy) 0.前言在前 ...

随机推荐

AppSettings和connectionStrings的却别（转）
AppSettings是ASP.NET1.1时期用的,在.NET Framework 2.0中,新增了ConnectionStrings. 1.<connectionStrings> &l ...
linux-----------shell的基础命令
shell中截取字符串的方法有很多中, ${expression}一共有9种使用方法. ${parameter:-word} ${parameter:=word} ${parameter:?word} ...
web前端基础知识 Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
poj 2376 Cleaning Shifts
http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
mysql时间属性之时间戳和datetime之间的转换
一.datetime转换为时间戳方案一:强制转换字段类型 use`nec`; ; ) NOT NULL COMMENT '注册时间' , ) NULL DEFAULT NULL COMMEN ...
什么是Cookie对象，Session对象，Application对象。
Cookie是: 一个由网页服务器放在您硬盘上的非常小的文本文件. 它本质上就像您的身份证明一样,并且不能像代码那样被执行或被用来散布病毒.它只能被您使用并且只能由提供的服务器读取. 使用Cookie ...
夺命雷公狗-----React---27--小案例之react经典案例todos（清除已完成）
这个功能其实也是很简单的,就只是让todos里面的内isDown进行取反即可然后在Zong里面进行下修改即可效果如下所示: 代码如下所示: <!DOCTYPE html> <ht ...
mysql数据库的备份与恢复
假定我们的目标数据库是 test, 表是 user.假定mysql的用户名和密码均为 root. 备份与恢复所用的程序分别是mysql软件包提供的 mysqldump 命令和 mysql 命令.思想很 ...
Apache部署django项目
在此之前,我们一直使用django的manage.py 的runserver 命令来运行django应用,但这只是我们的开发环境,当项目真正部署上线的时候这做就不可行了,必须将我们的项目部署到特定的w ...
python之编写三层菜单（第一天）
作业三:多级菜单三级菜单可依次选择进入各子菜单所需新知识点:列表.字典针对此菜单程序的设计,使用了yaml格式的文本,由python对其内容进行解析为多重字典,然后对字典进行遍历,判断并输出三 ...

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