设计模式-javascript实现【代理模式】

定义： 代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。

1. 代理模式的实现

const Flower = function(){};
const xiaoming = {
  sendFlower: function(target){
    const flower = new Flower();
    target.receiveFlower(flower);
  }
};

const B = {
  receiveFlower: function(flower) {
    A.listenGoodMood(function(){
      A.receiveFlower(flower);
    });
  }
};

const A = {
  receiveFlower: function(flower){
    console.log('receive the ' + flower);
  },
  listenGoodMood: function(fn) {
    setTimeout(function(){
      fn();
    }, 2000);
  }
};

xiaoming.sendFlower(B);

2. 虚拟代理实现图片愈加载

虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建。

const myImage = (function(){
  const imageNode = document.createElement('img');
  document.body.appendChild(imgNode);
  return {
    setSrc: function(src){
      imgNode.src = src;
    }
  };
})();

const proxyImage = (function(){
  const img = new Image;
  img.onload = function(){
    myImage.setSrc(this.src);
  }
  return {
    setSrc: function(src){
      myImage.setSrc('file://C:/Users/svenzeng/Desktop/loading.gif');
      img.src = src;
    }
  };
})();

proxyImage.setSrc('http://imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg');

3. 用高阶函数实现创建缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则
可以直接返回前面存储的运算结果。

const createProxyFactory = function(fn){
  const cache = {};
  return function(){
    const args = Array.prototype.join.call(arguments, ',');
    if( args in cache ){
      return cache[args];
    }
    return cache[args] = fn.apply(this, arguments);
  };
};

const mult = function(){
  let a = 1;
  for (let i = 0, l = arguments.length;  i< l; i++){
    a = a * arguments[i];
  }
  return a;
};

const proxyMult = createProxyFactory(mult);
console.log(proxyMult(1, 2, 3, 4));  // 24