代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问
代理模式的用处(个人理解)：为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效率、状态判断等。
代理模式中最常用的是虚拟代理和缓存代理
一、虚拟代理
虚拟代理是把一些开销很大的对象，延迟到真正需要它的时候才去创建执行
示例: 虚拟代理实现图片预加载
// 图片加载函数
var myImage = (function(){
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
}
})();
// 引入代理对象
var proxyImage = (function(){
var img = new Image;
img.onload = function(){
// 图片加载完成，正式加载图片
myImage.setSrc( this.src );
};
return {
setSrc: function(src){
// 图片未被载入时，加载一张提示图片
myImage.setSrc("file://c:/loading.png");
img.src = src;
}
}
})();
// 调用代理对象加载图片
proxyImage.setSrc( "http://images/qq.jpg");
示例: 虚拟代理合并HTTP请求
假设一个功能需要频繁的进行网络请求，这会造成相当大的开销，解决方案是通过一个代理函数来收集一段时间之内的请求，一次性发给服务器。
例如：做一个文件同步的功能，当我们选中一个文件时，就同步到另外一台备用服务器上
// 文件同步函数
var synchronousFile = function( id ){
console.log( "开始同步文件，id为：" + id );
}
// 使用代理合并请求
var proxySynchronousFile = (function(){
var cache = [], // 保存一段时间内需要同步的ID
timer; // 定时器指针
return function( id ){
cache[cache.length] = id;
if( timer ){
return;
}
timer = setTimeout( function(){
proxySynchronousFile( cache.join( "," ) ); // 2s 后向本体发送需要同步的ID集合
clearTimeout( timer ); // 清空定时器
timer = null;
cache = []; // 晴空定时器
},2000 );
}
})();
// 绑定点击事件
var checkbox = document.getElementsByTagName( "input" );
for(var i= 0, c; c = checkbox[i++]; ){
c.onclick = function(){
if( this.checked === true ){
// 使用代理进行文件同步
proxySynchronousFile( this.id );
}
}
}
二、 缓存代理
缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以返回前面的运算结果。
示例: 为乘法、加法等创建缓存代理
// 计算乘积
var mult = function(){
var a = 1;
for( var i = 0, l = arguments.length; i < l; i++){
a = a * arguments[i];
}
return a;
};
// 计算加和
var plus = function () {
var a = 0;
for( var i = 0, l = arguments.length; i < l; i++ ){
a += arguments[i];
}
return a;
};
// 创建缓存代理的工厂
var createProxyFactory = function( fn ){
var cache = {}; // 缓存 - 存放参数和计算后的值
return function(){
var args = Array.prototype.join.call(arguments, "-");
if( args in cache ){ // 判断出入的参数是否被计算过
console.log( "使用缓存代理" );
return cache[args];
}
return cache[args] = fn.apply( this, arguments );
}
};
// 创建代理
var proxyMult = createProxyFactory( mult ),
proxyPlus = createProxyFactory( plus );
console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出： 24
console.log( proxyMult( 1, 2, 3, 4 ) ); // 输出： 缓存代理 24
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出： 10
console.log( proxyPlus( 1, 2, 3, 4 ) ); // 输出： 缓存代理 10
以上三个示例为大家详细介绍了javascript代理模式，希望对大家的学习有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“学习JavaScript设计模式(代理模式)”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。