前言
对于前端工程师来讲，学一点设计模式对于某种场合下的问题能够更优雅的解决。当面对比较复杂的web应用的时候，使用设计模式能够帮助咱们写出更健壮、安全、易于维护的代码体验更好的产品来。今天咱们先一起来学习下代理模式。
代理模式分类
代理模式从字面理解就和咱们平时听到的代理商差不多一个意思：工厂生产了产品后不直接去销售，而是由另外一个商家去帮我卖。咱们的代理模式也差不多，当我想访问一个文件，API，或者对象的时候，不能直接去访问而是通过一个中间对象或者方法去帮忙访问，并把结果返回给咱们（我的个人理解，可能不是很准确，请指正）。这样有什么好处呢？待会我们在下面会提到。我们平时常用的代理模式又分为一下几类的代理：
- 安全代理：在访问实际的数据之前，过滤掉非法等不满足条件的请求，保证数据的安全性
- 缓存代理：为一些开销大的运算结果提供暂时的存储，当请求参数一样的时候直接返回结果，减少运算
- 虚拟代理：为开销大的对象创建一个小巧的虚拟替身，只有当对象在实际使用的时候才创建实际的对象
安全代理的应用
表单检验就是咱们平时工作中很常见的一种安全代理模式：用户提交表单，对表单数据进行校验，如果账号、密码格式正确责向后台进行数据提交，否则直接提示用户错误项。在这里用户输入出现格式错误的时候我们能够过滤掉，带来的好处是
- 减少了格式错误的情况下服务器的处理，减轻了服务器压力
- 提升了用户体验，不需要网络请求，用户能更快的知道自己错误的原因（尤其是网络情况不好的情况下）
缓存代理的应用
在网络应用中什么最影响交互体验？网络！每一个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);
};
};
在图片加载完成之前，我们向显示图片的容器中先显示咱们的默认图片，当我们真实想要加载的图片加载完成之后，清空掉图片容器，把当前的图片写入到咱们的图片容器中去。
最后
本文其实对于代理模式介绍的不是很深，只是一个抛砖引玉的文章；希望感兴趣额的同学能够去网上查找更多的资料学习代理模式，以及咱们实际工作中对于代理模式的使用例子。
