js设计模式总结-代理模式
代理模式
解决哪一类问题
从字面意思上理解，代理模式解决对一个对象的直接访问，这种直接访问可能是"不方便"的，所谓"不方便"可能是直接访问成本比较大(在前端领域通常是要获取后台数据或者执行复杂的计算)，或者需要对原始对象进行一些修饰或处理。
实现原理
实现一个代理对象，这个代理对象和原对象对外暴露相同的接口，用户直接操作代理对象，对于说对用户是透明的，用户并不知道有代理存在。
虚拟代理
把一些昂贵的操作放在代理对象中进行，现在体会的还不是很深刻，具体例子没想好，以后补充。
缓存代理
把昂贵操作产生的数据缓存在代理对象中，避免了重复操作
// 假设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.前言 在前 ...
随机推荐
- c 头文件<ctype.h>（二）
测试<ctype.h>函数 #include <stdio.h> #include <ctype.h> int main(){ ; ; i < ; ++i){ ...
- left join on 和where条件的放置
先看个例子 以下P1与S1是一对多的关系 结果分别是:1746,1748,1748,1277525,307 由此看出: P1 left join S1 on ... and ...是将S1表中数据先过 ...
- paper 124：【转载】无监督特征学习——Unsupervised feature learning and deep learning
来源:http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio c ...
- js计算相隔天数日期
计算40天前的日期: var temp = new Date();console.log(temp);var tempValue = temp.getTime() - 40 * 24* 60*60*1 ...
- DataList删除操作
<asp:DataList ID="fileList" runat="server" RepeatColumns="1" Repeat ...
- (转)sl简单自定义win窗体控件
sl简单自定义win窗体控件 相信大家接触过不少win窗体控件ChildWin子窗口就的sl自带的一个 而且网上也有很多类似的控件,而今天我和大家分享下自己制作个win窗体控件,希望对初学 ...
- AutoHotkey 使用笔记
注意事项 为了支持中文需安装 AutoHotkey_L Notepad2对ahk代码高亮和折叠支持良好,SciTE则能够提供输入提示 绿色版*.ahk关联AutoHotkey.exe就能双击运行 Au ...
- Spring Batch学习笔记三：JobRepository
此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch Job在运行时有很多元数据,这些元数据一般会被保存在内存或者数据库中,由于Spring Batch在默认配置是使用H ...
- MVC2,MVC3,MVC4和MVC5的不同
现在MVC的技术日趋成熟,面对着不同版本的MVC大家不免有所迷惑 -- 它们之间有什么不同呢?下面我把我搜集的信息汇总一下,以便大家能更好的认识不同版本MVC的功能,也便于自己查阅. View Eng ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...