什么是代理模式
代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。举个例子：明星与经纪人的关系，明星是请求的本体，经纪人就是代理proxy
如何实现代理模式
代理对象内部含有对本体对象的引用，因而可以与调用本体的相关方法；同时，代理对象提供与本体对象相同的接口，方便在任何时刻代理本体对象。
代理模式经典的应用场景 —— 大图加载缓冲
大家都应该经历过这种情况：网页内加载图片的时候（无论是手机端还是PC端），当网络情况不佳或是图片过大时，就会出现图片一截一截的慢慢出现，如图：
这就产生了非常不友好的体验，卡顿不流畅，会让我们可爱的宝贝用户感觉到很焦虑。
这个时候就可以用到 js的代理模式，图片没有加载完成的时候，干脆就不让用户看到，给一个可爱的loading动画先看着，缓解一下用户无聊的枯燥的心情：
html 部分
<!DOCTYPE html> <html> <body> <div class="img-con"> <img class="img2" src="" height="540"/> </div> <button class="btn1">请求图片</button> </body> </html>
js 部分
var btn1 = document.querySelector(".btn1"); btn1.onclick = function(){ var myImage = (function(){ var imgNode = document.querySelector(".img2"); return { setSrc: function(src){ imgNode.src = src; } } })(); // 兼顾了图片的载入时间 // 图片没加载好 显示loading动作 var proxyImage = (function(){ // 无ajax请求图片 var img = new Image; img.onload = function(){ myImage.setSrc(this.src) } return{ setSrc: function(src){ // loading动画 加载时显示 myImage.setSrc('./img/timg.gif'); img.src = src; } } })(); // 大图文件 proxyImage.setSrc('./img/img25418.jpg'); }
结语
如果本文有错误，敬请指出。
