代理模式

解决哪一类问题

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

实现原理

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

虚拟代理

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

缓存代理

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

    // 假设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. 配置Maven环境并创建简单的web项目步骤

    Maven的介绍 主要包含以下三个内容: 1.POM(Project Object Model):即An xml file(pom.xml):依赖管理.生命周期和插件的需要等都在pom.xml文件中完 ...

  2. linux------------centos防火墙

    CentOS7默认的防火墙不是iptables,而是firewalle. 你可以用rpm -qa | grep iptables来查看,一般会出现两个一个是iptables 另一个是iptables. ...

  3. Java类WebServer及中间件拿webshell方法总结

    0.序 原文名称:Tomcat.Weblogic.JBoss.GlassFish.Resin.Websphere弱口令及拿webshell方法总结 原文from:http://www.hack80.c ...

  4. 关于git自己所学到的东西

    1.什么是Git(傻瓜内容跟踪器)      Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 Git 是 Linus Torvalds (Linus在1991年创建了 ...

  5. 开通博客的第一天上传我的C#基础笔记,个人觉得很好用。

    1.索引器  string arrStr = "sddfdfgfh";  索引器的目的就是为了方便而已,可以在该类型的对象后面直接写[]访问该对象里面的成员  Console.Wr ...

  6. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  7. 通过cygwin安装openSSH

    openSSH的安装是学习hadoop必不可少的一步,如果ssh装不好,hadoop的安装会进行不下去.本人初学hadoop时发现以前安装ssh走了一些弯路,现在又有了一些认识,所以重写了这篇日志,供 ...

  8. 货运APP雨后春笋 传统物流模式将被改变

    移动互联网正在改变我们的生活方式,各种手机APP充斥着人们的生活,物流行业也不例外.货运APP的出现,对于物流行业是一个提升的机会,也是迈向标准化和专业化的一个有效途径.有专家预测,这将为物流行业的发 ...

  9. python之haproxy配置文件操作(第三天)

    作业: 对haproxy配置文件进行操作 要求: 对haproxy配置文件中backend下的server实现增删改查的功能 一.这个程序有二个版本 1. python2.7版本见haproxy_py ...

  10. web系统开发为什么用asp.net MVC,为什么不用?

     向高手咨询下,现在asp.net MVC很流行,但我好像提不起兴趣.企业级Web应用,使用纯HTML+jquery交互+Http Handler(或WebAPI),不是挺好的吗?有很多优点:1.Ht ...