学习javascript设计模式之代理模式
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);
学习javascript设计模式之代理模式的更多相关文章
- JavaScript设计模式之代理模式
一.代理模式概念 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象控制具体对象的引用.代理几乎可 ...
- JavaScript 设计模式之代理模式
一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...
- 第三章 --- 关于Javascript 设计模式 之 代理模式
第一.定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问. 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花 ...
- Java学习笔记——设计模式之四.代理模式
To be, or not to be: that is the question. --<哈姆雷特> 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 上代码: p ...
- JavaScript设计模式_03_代理模式
代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最 ...
- JavaScript设计模式(代理模式)
一.简单的单例模式: 1.未使用代理模式的情况:小明直接给女神送花 var Flower = function() {} var xiaoming = { sendFlower: function( ...
- JavaScript设计模式-19.代理模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C#设计模式(13)——代理模式(Proxy Pattern)
一.引言 在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代 ...
- 乐在其中设计模式(C#) - 代理模式(Proxy Pattern)
原文:乐在其中设计模式(C#) - 代理模式(Proxy Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 代理模式(Proxy Pattern) 作者:webabcd 介绍 为 ...
随机推荐
- Java中如果把构造方法也私有化,如何创建对象?Java的单例设计模式——饿汉式和懒汉式区别
Java的单例模式——饿汉式 package com.swift; //Java单例设计模式——恶汉式 public class SinglePerson { private String name= ...
- 从输入URL到页面加载完成的过程中都发生了什么事情?
为了便于理解,我将整个过程分为了六个问题来展开. 第一个问题:从输入 URL 到浏览器接收的过程中发生了什么事情? 从触屏到 CPU 首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱 ...
- drawRect - 谈画图功能的内存优化
作者介绍 作者:毕洪博 ( @毕洪博 ),iOS 开发者,pop Art 追随者.现在正在鼓捣 AVFoundation,博客 bihongbo.com, 欢迎大家找我讨论技术. 作者已将本文在微信公 ...
- VS快捷键总结(开发中经常遇到)
1.窗口快捷键 (大家有没有发现但凡跟窗口挂上钩的快捷键当中都有一个W,那是因为W代表Windows也就是窗口的意思) Ctrl+W,W: 浏览器窗口 (浏览橱窗用有道的翻译是window shop ...
- 初学redis,redis基本数据类型
String: 1. set key value 2. get key 3. del key 4. strlen key 5. getset key value 修改键值对 6. getrange ...
- 02Vs2013常用路径配置
1.设置头文件路径 项目 -> xxx属性页 -> 配置属性 -> C/C++ -> 常规 -> 附加包含目录. 2.包含 x.lib 库路径 项目 -> xxx属 ...
- 关于上传文件 非ajax提交 得到后台数据问题
<form name="configForm" id="configForm" method="post" action=" ...
- Redis的安装、服务配置
在网上找了很多资料,有些可以正常安装,有些安装会出毛病,仔细想了想,还是自己整理一份吧,仅仅为自己下次再用的时候,能够快速的定位到可以正常用的文章! 我使用的是VMware Workstation P ...
- Python中的字典与集合
今天我们来讲一讲python中的字典与集合 Dictionary:字典 Set:集合 字典的语法: Dictionary字典(键值对) 语法: dictionary = {key:value,key: ...
- COMP9021--6.6
1. 在print结尾处添加end='' print默认在字符串结尾处添加换行符,添加end=''后表示这个语句并没有结束,结尾不换行 2. 为了减少重复代码以及便于修改,我们可以编写函数 1) 函数 ...