学习javascript设计模式之代理模式
2015-08-31 10:23
736 查看
1、代理模式为一个对象提供一个代用品或占位符,以便控制对它的访问。
2、不用代理模式: 客户 -> 本体 使用代理模式: 客户 -> 代理 -> 本体
3、例子场景1 点击操作与服务器交互代理 虚拟代理
<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
<input type="checkbox" id="10"></input>10
var synchronousFile = function(id){
console.log(id);
}
var proxySynchronousFile = (function(){
var cache = [],
timer = null;
return function(id){
cache.push(id);
if(timer){return;}
timer = setTimeout(function(){
synchronousFile(cache.join(','));
clearTimeout(timer);
cache.length = 0;
timer =null;
},2000);
}
})();
var checkboxes = document.getElementsByTagName('input');
for(var i=0,c; c=checkboxes[i++];){
c.onclick = function(){
if(this.checked == true){
proxySynchronousFile(this.id);
}
}
}
场景2 图片加载代理 代理和本体接口的一致性
var createImg = (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(){
createImg.setSrc(this.src);
}
return {
setSrc:function(){
createImg.setSrc('images/loading.gif');
this.src=src;
}
}
})();
场景3、求和计算 缓存代理
var mult = function(){
var a=1;
for(var i=0,l=arguments.length; i<l;i++){
a = a*arguments[i];
}
alert(1);
return a;
}
var proxyMult = (function(){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args]= mult.apply(this,arguments);
}
})();
console.log(proxyMult(2,2,2,2));
console.log(proxyMult(2,2,2,2));
/***********创建缓存代理工厂********************/
var createProxyFactory = (function(fn){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args]= fn.apply(this,arguments);
}
})();
var proxyMult = createProxyFactory(mult);
proxyMult(2,3,4,5);
proxyMult(2,3,4,5);
2、不用代理模式: 客户 -> 本体 使用代理模式: 客户 -> 代理 -> 本体
3、例子场景1 点击操作与服务器交互代理 虚拟代理
<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
<input type="checkbox" id="10"></input>10
var synchronousFile = function(id){
console.log(id);
}
var proxySynchronousFile = (function(){
var cache = [],
timer = null;
return function(id){
cache.push(id);
if(timer){return;}
timer = setTimeout(function(){
synchronousFile(cache.join(','));
clearTimeout(timer);
cache.length = 0;
timer =null;
},2000);
}
})();
var checkboxes = document.getElementsByTagName('input');
for(var i=0,c; c=checkboxes[i++];){
c.onclick = function(){
if(this.checked == true){
proxySynchronousFile(this.id);
}
}
}
场景2 图片加载代理 代理和本体接口的一致性
var createImg = (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(){
createImg.setSrc(this.src);
}
return {
setSrc:function(){
createImg.setSrc('images/loading.gif');
this.src=src;
}
}
})();
场景3、求和计算 缓存代理
var mult = function(){
var a=1;
for(var i=0,l=arguments.length; i<l;i++){
a = a*arguments[i];
}
alert(1);
return a;
}
var proxyMult = (function(){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args]= mult.apply(this,arguments);
}
})();
console.log(proxyMult(2,2,2,2));
console.log(proxyMult(2,2,2,2));
/***********创建缓存代理工厂********************/
var createProxyFactory = (function(fn){
var cache = {};
return function(){
var args = Array.prototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args]= fn.apply(this,arguments);
}
})();
var proxyMult = createProxyFactory(mult);
proxyMult(2,3,4,5);
proxyMult(2,3,4,5);
相关文章推荐
- js方式的页面跳转
- javascript 折后保留一位小数
- js实现设置首页和加入收藏详细版
- JS继承
- 数据验证插件的使用validator.js
- js 回车键 跳转到下一个输入框
- Join Resig's “Simple JavaScript Inheritance ”
- Javascript 异步编程的4种方法
- 竖向tab滑门菜单JS代码
- 【js】弹出文件选择框,可用与文件上传(适配所有浏览器)
- js 获取url 参数
- JS-产生随机数的几个用法!
- json 数组 转bean
- 浅谈javascript的Array.prototype.slice.call
- 关于一个JS加法函数的应用
- 【二分+hash】【字符串】【平衡树】【JSOI 2008】火星人prefix
- js Date 日期格式化(转)
- seajs部分版本iPhone测试卡死
- 76 JSON基本概念和解析方案
- JS 浮点数四则运算精度丢失