分类
保护代理:代理B可以帮助A过滤掉一些请求
虚拟代理:代理B把一些开销很大的对象,要延迟到真正需要的时候才去创建
主要作用:A对象的某个方法可以执行某项操作,但如果想在A对象执行之前做些事情,而又不改变A对象,可以先让B对象做一些事情,再把做处理过的结果给A对象执行
需要注意的问题:接口的一致性,即B的方法名和A的方法名要一致。
应用场合:图片预加载、合并HTTP请求、惰性加载、缓存代理等
代码主要形式
const objectA = { doSomething() { ... }; } const proxyB = (function() { 某些前置事情 也可以在这里监听事件,等待完成后将结果给objectA.doSomething return { doSomething() { 某些前置事情 再把结果给objectA.doSomething }; } })();
举例
1、图片预加载
const myImage = (function() { DOM操作创建名为imageNode的<img>标签并插入到HTML中 return { setSrc(src) { imageNode.src = src; } } })(); const proxyImage = (function() { const tempImage = new Image; tempImage.onload--(成功)-->调用myImage.src,设置真正的图片地址 return { setSrc(src) { 为myImage设置菊花图; tempImage.src = src; // 预加载 } } })(); // 调用 proxyImage.srcSrc('....图片的地址');
2、合并HTTP请求
const synchronousFile = function(id) { 发起请求 }; const proxySynchronousFile = (function() { const cache = []; // 存放多个文件id,一起发送 let timer; return function(id) { cache.push(id); if(timer) { return; } timer = setTimeout(function() { 同步cache中的全部文件,清空定时器 }, 2000); } })();
3、缓存代理-乘积计算
const mult = function() { return 所有传入参数的乘积; }; const proxyMult = (function() { const cache = {}; return function() { if (arguments的相乘结果已经在cache中){ return cache[arguments.toString()]; } return cache[arguments.toString()] = mult.apply(this, arguments); }; })();
参考文献:
[1] 《JavaScript设计模式与开发时间》,曾探,中国工信出版集团.