JavaScript设计模式总结-代理模式

分类

　　保护代理：代理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设计模式与开发时间》，曾探，中国工信出版集团.

JavaScript设计模式总结-代理模式

猜你喜欢