阅读 66

前端新手进阶--设计模式(代理模式)

原文链接: divpc.cn

前言

对于前端工程师来讲,学一点设计模式对于某种场合下的问题能够更优雅的解决。当面对比较复杂的web应用的时候,使用设计模式能够帮助咱们写出更健壮、安全、易于维护的代码体验更好的产品来。今天咱们先一起来学习下代理模式。

代理模式分类

代理模式从字面理解就和咱们平时听到的代理商差不多一个意思:工厂生产了产品后不直接去销售,而是由另外一个商家去帮我卖。咱们的代理模式也差不多,当我想访问一个文件,API,或者对象的时候,不能直接去访问而是通过一个中间对象或者方法去帮忙访问,并把结果返回给咱们(我的个人理解,可能不是很准确,请指正)。这样有什么好处呢?待会我们在下面会提到。我们平时常用的代理模式又分为一下几类的代理:

  1. 安全代理:在访问实际的数据之前,过滤掉非法等不满足条件的请求,保证数据的安全性
  2. 缓存代理:为一些开销大的运算结果提供暂时的存储,当请求参数一样的时候直接返回结果,减少运算
  3. 虚拟代理:为开销大的对象创建一个小巧的虚拟替身,只有当对象在实际使用的时候才创建实际的对象

安全代理的应用

表单检验就是咱们平时工作中很常见的一种安全代理模式:用户提交表单,对表单数据进行校验,如果账号、密码格式正确责向后台进行数据提交,否则直接提示用户错误项。在这里用户输入出现格式错误的时候我们能够过滤掉,带来的好处是

  1. 减少了格式错误的情况下服务器的处理,减轻了服务器压力
  2. 提升了用户体验,不需要网络请求,用户能更快的知道自己错误的原因(尤其是网络情况不好的情况下)

缓存代理的应用

在网络应用中什么最影响交互体验?网络!每一个http请求都需要耗费客观的时间,所以为了减少网络的请求,提升用户体验咱们需要尽量减少网络请求。除了浏览器自带的缓存功能,咱们在编写代码的过程中,尤其是制作SPA(单页面应用)的时候可以把部分事实性要求不要的请求做缓存,这里就需要应用上咱们的缓存代理模式了,如下:

var result = {}
// 这里咱们假设传的参数都是对象
function queryData(params) {
  $.ajax({
    type: 'GET',
    url: APi的路径,
    data: params,
    success: function(data){
      var key = JSON.stringify(params)
      result[key] = data
      dosomething(key)
    }
  })
}
function dosomething(key) {
  // 执行某些获取到数据后的操作
  // do some thing about result[key]
}
function queryDataProxy(params) {
  var key = JSON.stringify(params)
  if (result[key]) {
    dosomething(key)
    return
  } else {
    queryData(params)
  }
}
复制代码

这样我们想要获取数据的时候,调用queryDataProxy函数,传入参数;在这个代理函数中,我们先判断当前请求参数的结果是否存在,如果存在责直接返回数据,否则请求API得到结果。在这里咱们对于实时性要求不高的数据,我们能够减少很多http请求的网络消耗。

虚拟代理的应用

虚拟代理在我们平时工作中最可能用到的是什么地方呢?图片预加载。图片的预加载是指在图片加载成功之前使用默认的图片显示,图片加载完成之后再显示真实的图片。

var newImage = function (src, el) {
  el.innerHtml = '';
  var imgNode = document.createElement('img');
  imgNode.src = src;
  el.appendChild(imgNode);
}
var proxyImage = function (src, el) {
  newImage('default.png', el);
  var img = new Image();
  img.src = src;
  img.onload = function () {
    newImage(src, el);
  };
};
复制代码

在图片加载完成之前,我们向显示图片的容器中先显示咱们的默认图片,当我们真实想要加载的图片加载完成之后,清空掉图片容器,把当前的图片写入到咱们的图片容器中去。

最后

本文其实对于代理模式介绍的不是很深,只是一个抛砖引玉的文章;希望感兴趣额的同学能够去网上查找更多的资料学习代理模式,以及咱们实际工作中对于代理模式的使用例子。