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.前言 在前 ...
随机推荐
- zookeeper清除事物日志
dataDir=/data/zookeeper/data dataLogDir=/data/zookeeper/log zk事物日志(快照)存放目录,高负荷工作的时候,会产生大量的日志,需 ...
- ios结构体语法
- h5 与app交互
http://www.jianshu.com/p/7151987f012d JSContext *context = [self.webView valueForKeyPath:@"docu ...
- ios 配置https
一般来讲如果app用了web service , 我们需要防止数据嗅探来保证数据安全.通常的做法是用ssl来连接以防止数据抓包和嗅探 其实这么做的话还是不够的 . 我们还需要防止中间人攻击(不明白的自 ...
- 组件封装：es6转es5
1.先全局安装babel-cli,输入命令 npm install babel-cli -g 2.输入 cd d:\es6 ; ---进入文件夹路径 3.输入 npm init: 一路回车键 ---( ...
- MICAPS数据文件格式
MICAPS系统的数据结构是建立在文件系统基础上的.其特点是: l 利用目录来区分不同的数据来源.要素和层次,即不同的数据来源.要素和层次的数据要放在不同的目录中.同一目录中的数据只能有时次或时效上 ...
- C# 利用ICSharpCode.SharpZipLib实现在线加密压缩和解密解压缩
这里我们选用ICSharpCode.SharpZipLib这个类库来实现我们的需求. 下载地址:http://icsharpcode.github.io/SharpZipLib/ 1.单个或多个文件加 ...
- github android
作者:ruijun 链接:https://www.zhihu.com/question/37160415/answer/79569042 来源:知乎 著作权归作者所有,转载请联系作者获得授权. ### ...
- C/C++之指针加减法
C和C++中可对指针进行加减,但对其进行乘除则基本无实际意义.一般来说,对指针进行减法的前提是减数和被减数均指向同一数组.加法同理.需要注意的是,两个指针的减法,结果是两个地址之间索引变量的数目,而不 ...
- 3D数学的实际应用
以前自己在学习三维程序开发时并没有在意3D数学在程序中的重要作用,但在实际工作中逐渐发现:自己忽视了3D数学的作用,我们实际开发工作总要求模型准确的变换,而不是强调渲染有多炫,那是游戏,如果是仿真程序 ...