外观模式和代理模式的联系和区别_JavaScript设计模式--代理模式

最新推荐文章于 2022-08-27 18:20:28 发布

weixin_39552874

最新推荐文章于 2022-08-27 18:20:28 发布

阅读量72

点赞数

文章标签：外观模式和代理模式的联系和区别

本文链接：https://blog.csdn.net/weixin_39552874/article/details/111394198

版权

明星都有经纪人作为代理。如果请明星办一场商演，只能联系其经纪人，经纪人会把商演的细节和报酬谈好，再把合同交给明星签。

一、定义

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

保护代理：用于控制不同权限的对象对目标对象的访问，在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）代理实现

// 创建图片DOM
var 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时候，它对应的文件就会被同步到另外一台服务器。

<body>
   <input type="checkbox" id="1" />文件1
   <input type="checkbox" id="2" />文件2
   <input type="checkbox" id="3" />文件3
   <input type="checkbox" id="4" />文件4
   <input type="checkbox" id="5" />文件5
   <input type="checkbox" id="6" />文件6
</body>

每选中一个 checkbox 就同步一次，显然不太合理。因为在 web 开发中，最大的开销就是网络请求。
解决方案方案：通过一个代理函数来收集一段时间之内的请求，然后一次性发给服务器。

var synchronousFile = function(id) {
  console.log("开始同步文件，id为：" + id);
};

var proxySynchonousFile = (function() {
  var cache = [],   // 保存本次需要同步文件的id
    timer;      // 定时器

  return function(id) {
    cache.push(id);
    if(timer) { 
      // 不要覆盖已经启动的定时
      return;
    }

    timer = setTimeout(function(){
      synchronousFile(cache.join(","));
      clearTimeout(timer);
      timer = null;
      cache.length = 0; // 清空缓存
    }, 2000);
  }
})();

var checkboxs = document.getElementsByTagName("input");

for(var i = 0, c; c = checkboxs[i]; i++) {
  c.onclick = function() {
    if(this.checked === true) {
      proxySynchonousFile(this.id);
    }
  }
}

四、缓存代理--计算乘积（序列一模一样）

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));

总结

代理和本体接口需要保持一致性！如果后续不需要代理对象，可以选择直接请求主体。代理接手请求的过程对于用户来说是透明的，用户不清楚代理和本体区别（也无需关心）

用户可以放心的请求代理，只关心是否得到想要的结果；
任何使用本体的地方都可以替换成使用代理（反之亦然）

不方便直接访问某个对象的时候，即是需要使用代理的时候。

欢迎关注「 Super 前端 」微信公众号

版权声明：本文原创自我的博客：李刚的学习专栏

weixin_39552874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
外观模式和代理模式的联系和区别_JavaScript设计模式--代理模式

明星都有经纪人作为代理。如果请明星办一场商演，只能联系其经纪人，经纪人会把商演的细节和报酬谈好，再把合同交给明星签。一、定义代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。保护代理：用于控制不同权限的对象对目标对象的访问，在JavaScript中很难判断谁访问了某个对象，所以保护代理很难实现。虚拟代理：会把一些开销很大的对象，延迟到真正需要它的时候才去创建。缓存代理：为一些开销大的...
复制链接

扫一扫