- /**
- * pre:代理模式
- * 小明追求A,B是A的好朋友,小明比较腼腆,不好意思直接将花交给A,
- * 于是小明将花交给B,再由B交给A.
- */
- //----------- 示例1 ---------
- // 不使用代理
- varFlower =function() {};
- varxiaoming = {
- sendFlower: function(target) {
- varflower =new Flower();
- target.receiveFlower(flower);
- }
- };
- varA = {
- receiveFlower: function(flower) {
- console.log("收到花:" + flower);
- }
- };
- xiaoming.sendFlower(A);
- // ----------- 示例2 --------------
- // 使用代理1
- varFlower =function() {};
- varxiaoming = {
- sendFlower: function(target) {
- varflower =new Flower();
- B.receiveFlower(flower);
- }
- };
- varB = {
- receiveFlower: function(flower) {
- A.receiveFlower(flower);
- }
- };
- varA = {
- receiveFlower: function(flower) {
- console.log("收到花:" + flower);
- }
- };
- xiaoming.sendFlower(B);
- //------------- 示例3 ---------------
- /*
- * 使用代理2
- * 从示例1和示例2,看不出使用代理有什么用处,B只不过是从中间转手了一次。
- * 接下来,我们想一下。给喜欢的人送花,怎样才能提高成功率呢?
- * 我们都知道,人有心情好和心情差的时候,当美女心情好的时候,送花成功的概率自然要大些。
- * 于是,我们将代理升级,监听美女的心情,心情好的时候再给她送花。
- * 为了演示,我们假设2秒后,A的心情变好。
- */
- varFlower =function() {};
- varxiaoming = {
- sendFlower: function(target) {
- varflower =new Flower();
- B.receiveFlower(flower);
- }
- };
- varB = {
- receiveFlower: function(flower) {
- A.listenGoodMood(function() {
- A.receiveFlower(flower);
- });
- }
- };
- varA = {
- receiveFlower: function(flower) {
- console.log("收到花:" + flower);
- },
- listenGoodMood: function(fn) {
- setTimeout(function() {
- fn.apply(this, arguments);
- }, 2000);
- }
- };
- xiaoming.sendFlower(B);
- // ---------- 示例4 ---------------
- /*
- * 【代理模式用处】:虚拟代理
- * 这里以加载图片为例,我们都知道当网络不畅以及图片过大时,图片加载都比较慢,
- * 为了更好的用户体验,我们都会在原图片未加载完成前,加上loading图片。
- * */
- //--4 _01未使用代理--
- varmyImage = (function() {
- varimgNode = document.createElement("img");
- document.body.appendChild(imgNode);
- return {
- setSrc: function(src) {
- this.imgNode.src = src;
- }
- }
- })();
- myImage.setSrc("xxx");
- //--4_02使用代理--
- varproxyMyImage = (function() {
- varimg =new Image();
- img.onload =function() {
- myImage.setSrc(this.src);
- };
- return {
- setSrc: function(src) {
- myImage.setSrc("loading.jpg");
- img.src = src;
- }
- }
- })();
- proxyMyImage.setSrc("xxx");
- /*
- * [注]:这里可以看到代理模式的好处:在不改变原有接口的同时,可以为系统添加新的行为。
- */
- //--------- 示例5---------------
- /*
- * 【代理模式用处】:合并http请求
- * 这里以选择文件同步为例。
- * 以往用户同步文件,在用户选中的时候就触发,这种方法做到了实时性,但无疑增加了网络的开销。
- * 实际在使用的过程中,往往并不需要立刻就同步。
- * 以下通过代理模式,将在用户选中文件2秒后进行同步请求。
- * */
- // --- 包含一段html代码,请自行添加到一个文件中 ------点我上传
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9// -- 上传文件 --
- varsynchronizeFile =function(id) {
- console.log("开始同步文件:" + id);
- };
- varproxySynchronizeFiles = (function() {
- varfileCache = [],
- timer;
- return function(id) {
- fileCache.push(id);
- if(timer) {
- return;
- }
- timer = setTimeout(function() {
- synchronizeFile(fileCache.join(","));
- clearTimeout(timer);
- timer =null;
- checkArr.length = 0;
- }, 2000);
- }
- })();
- varcheckArr = document.getElementsByTagName("input");
- for(vari = 0, c; c = checkArr[i++];) {
- c.onclick =function() {
- if(this.checked ==true) {
- proxySynchronizeFiles(this.id);
- }
- }
- }
- // ------------ 示例6 -----------------
- /*
- * 【代理模式用处】:缓存代理
- * 以计算器为例,比如计算某些数的乘积,当参数重复时,我们希望不用重复计算,直接返回结果。
- * 以下用到代理模式做缓存。
- */
- varmult =function() {
- if(!arguments) {
- console.log("请输入参数");
- return;
- }
- vara = 1;
- for(vari = 0, b; b = arguments[i++];) {
- a = a * b;
- }
- return a;
- };
- varproxyMult = (function() {
- varcache = {};
- return function() {
- varstr = Array.prototype.join.call(arguments, ",");
- if(strin cache) {
- console.log("重复return.");
- return cache[str];
- }
- returncache[str] = mult.apply(this, arguments);
- }
- })();
- console.log(proxyMult(2, 3, 4));
- console.log(proxyMult(2, 3, 4));
- //------------ 示例7 --------------
- /*
- * 缓存代理升级 - 通用版计算
- *
- */
- varmult =function() {
- if(!arguments) {
- return;
- }
- vart = 1;
- for(vari = 0, a; a = arguments[i++];) {
- t = t * a;
- }
- return t;
- };
- varplus =function() {
- if(!arguments) {
- return;
- }
- vart = 0;
- for(vari = 0, a; a = arguments[i++];) {
- t += a;
- }
- return t;
- };
- varcreateProxyCaculate =function(fn) {
- varcache = {};
- return function() {
- varstr = Array.prototype.join.call(arguments, ",");
- if(strin cache) {
- console.log(str);
- return cache[str];
- }
- returncache[str] = fn.apply(this, arguments);
- }
- };
- varproxyMult = createProxyCaculate(mult);
- varproxyPlus = createProxyCaculate(plus);
- console.log(proxyMult(2, 3, 4));
- console.log(proxyMult(2, 3, 4));
来源: http://www.cnblogs.com/stinchan/p/6971277.html