核心产品
帮助中心
时间：2021-05-18
一、定义
代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。
代理分为：保护代理和虚拟代理
保护代理：用于控制不同权限的对象对目标对象的访问，在JavaScript中很难判断谁访问了某个对象，所以保护代理很难实现。
二、图片预加载（最常见的虚拟代理应用场景）
图片预加载是一种常用技术，如果直接给某个img标签节点设置src属性，由于图片过大或者网络不佳，图片的位置往往有段时间会有空白。常见的做法事先用一张loading图片占位，然后异步加载图片，待图片加载完成，把其填充到img节点里。
实现原理：
创建一个Image对象：var a = new Image();
定义Image对象的src: a.src = “xxx.gif”;
这样做就相当于给浏览器缓存了一张图片。
可通过Image对象的complete属性来检测图像是否加载完成。每个Image对象都有一个complete属性，当图像处于装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束，此时complete属性为true。
（1）非代理实现
var myImage = (function() { var imgNode = document.createElement("img"); document.body.appendChild(imgNode); var img = new Image(); img.onload = function() { imgNode.src = img.src; }; return { setSrc: function(src) { imgNode.src = "./images/loading.gif"; img.src = src; } }})();myImage.setSrc("./images/originImg.png");（2）代理实现
// 创建图片DOMvar 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); // this指向img！img加载完成后，将img.src传递给myImage }; return { setSrc: function(src) { myImage.setSrc("./images/loading.gif"); // loading img.src = src; } };})();proxyImage.setSrc("./images/originImg.png");使用代理模式的好处：使每个函数功能单一，实现对象设计的“单一职责原则”！
三、文件同步
假设我们在做一个文件同步功能，当选中checkbox时候，它对应的文件就会被同步到另外一台服务器。
没选中一个checkbox就同步一次，显然不太合理。因为在web开发中，最大的开销就是网络请求。
解决方案：通过一个代理函数来收集一段时间之内的请求，然后一次性发给服务器。
四、缓存代理–计算乘积（序列一模一样）
var mult = function() { var result = 1; for(var i = 0, l = arguments.length; i < l; i++) { result= result * arguments[i]; } return result;};var proxyMult = (function() { var cache = {}; // {"1,2,3": 6} 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(1, 2, 3));// 改造：var proxyFactory = 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); } };console.log(proxyFactory(mult)(1, 2, 3));希望本文所述对大家学习javascript程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript设计模式之代理模式。分享给大家供大家参考，具体如下：代理模式的定义，代理是一个对象(proxy)用它来控制目标对象的访问。为此
前言其实和其他编程语言一样，Javascript同样拥有着很多种设计模式，比如单例模式、代理模式、观察者模式等，熟练运用Javascript的设计模式可以使我们
前言和其他编程语言一样，Javascript同样拥有着很多种设计模式，比如单例模式、代理模式、观察者模式等，熟练运用Javascript的设计模式可以使我们的代
本文实例讲述了java设计模式之静态代理模式。分享给大家供大家参考，具体如下：代理模式，可以通过代理可以在原来的基础上附加一些其他的操作。静态代理模式相对比较简
本文实例讲述了Python设计模式之代理模式。分享给大家供大家参考，具体如下：代理模式(ProxyPattern):为其他对象提供一种代理以控制对这个对象的访问
