JS设计模式之代理模式-虚拟代理

定义

为一个对象提供一种代理以控制对这个对象的访问

分类

虚拟代理：虚拟代理是把一些开销很大的对象，延迟到真正需要它的时候才去创建执行
安全代理：控制真实对象的访问权限
远程代理（一个对象将不同空间的对象进行局部代理）
智能代理（调用对象代理处理另外一些事情如垃圾回收机制增加额外的服务）

注：在真实的开发中往往对于代理模式划分不那么清晰，也就是不会只用某一种代理模式，而是多种代理模式的结合。

应用

虚拟代理-图片加载，文件上传
保护代理-登录操作后才能看全功能，前端校验
远程代理-监控多个对象的状态，总机监控分店
智能代理-提供额外的其他服务 火车站代售处

分析

虚拟代理：以图片预加载、懒加载为例

问什么要使用预加载+懒加载？以淘宝举例，商城物品图片多之又多，一次全部请求过来这么多图片无论是对js引擎还是浏览器本身都是一个巨大的工作量，会拖慢浏览器响应速度，用户体验极差，而预加载+懒加载的方式会大大节省浏览器请求速度，通过预加载率先加载占位图片（第二次及以后都是缓存中读取），再通过懒加载直到要加载的真实图片加载完成，瞬间替换。这种模式很好的解决了图片一点点展现在页面上用户体验差的弊端。
须知：图片第一次设置src，浏览器发送网络请求；如果设置一个请求过的src那么浏览器则会从缓存中读取from disk cache

<div class="demo"></div>

function MyImg(_class) {
    var _img = document.createElement('img');
    this.setSrc = function (_src) {
        _img.src = _src;
    }
    document.getElementsByClassName(_class)[0].appendChild(_img);
}

var ProxyMyImg = (function () {//代理MyImg
    var _img = new Image();
    var _myImg = new MyImg('demo');
    _img.onload = function () {//_img的src加载完成后,_myImg的src被_img的src替换
        setTimeout(function () {
            _myImg.setSrc(_img.src)//这里设置请求过的src直接从缓存读取,速度飞快不会出现一点点加载图片的情况
        }, 1000)
    }
    return function (occupySrc, src) {
        _myImg.setSrc(occupySrc);//预加载占位图片
        _img.src = src;
    }
})()

ProxyMyImg('占位图片src','最终加载图片src')