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 () {//代理MyImgvar _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')

JS设计模式之代理模式-虚拟代理相关推荐

代理模式——虚拟代理（二）
代理模式定义为另一个对象提供一个替身或占位符以控制对这个对象的访问.使用代理模式创建代表对象,让代表对象控制对某对象的访问,被代理的对象可是远程的对象.创建开销大的对象或需要安全控制的对象. 代理分 ...
代理模式虚拟代理实现图片预加载
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 在Web开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时 ...
代理模式——虚拟代理（结构型）
上一章已经了解了远程代理,这一章将会介绍虚拟代理代理分三种: 1.远程代理,帮助我们控制访问远程对象: 远程代理可以作为另一个JVM上对象的本地代表.调用代理的方法,会被代理利用网络转发到远程执行, ...
代理模式 -虚拟代理 ProxyPattern
interface IVirtualProxy { void Request(); } 虚拟代理接口 using System; using System.Threading; class Virtu ...
代理模式——远程代理（一）
代理模式定义为另一个对象提供一个替身或占位符以控制对这个对象的访问.使用代理模式创建代表对象,让代表对象控制对某对象的访问,被代理的对象可是远程的对象.创建开销大的对象或需要安全控制的对象. 代理分 ...
【设计模式】代理模式 ( 动态代理 | 模拟 Java 虚拟机生成对应的代理对象类 )
文章目录前言一.模拟 JVM 生成对应的代理对象二.模拟 JVM 生成对应的代理对象完整流程展示 1.目标对象接口 2.被代理对象 3.调用处理程序 4.模拟 JVM 生成的代理对象类 5 ...
代理模式（三）：远程代理，虚拟代理，缓冲代理
15.4 远程代理远程代理(Remote Proxy)是一种常用的代理模式,它使得客户端程序可以访问在远程主机上的对象,远程主机可能具有更好的计算性能与处理速度,可以快速响应并处理客户端的请求.远程 ...
【设计模式】代理模式 ( 动态代理使用流程 | 创建目标对象 | 创建被代理对象 | 创建调用处理程序 | 动态创建代理对象 | 动态代理调用 )
文章目录前言一.静态代理的弊端二.动态代理的优势三.动态代理使用流程 1.目标对象接口 2.被代理对象 3.调用处理程序 4.客户端四.动态生成代理对象类的字节码文件数据前言代 ...
第六周 Java语法总结_设计原则_工厂模式_单例模式_代理模式(静态代理_动态代理)_递归_IO流_网络编程(UDP_TCP)_反射_数据库
文章目录 20.设计原则 1.工厂模式 2.单例模式 1)饿汉式 2)懒汉式 3.Runtime类 4.代理模式 1)静态代理 2)动态代理动态代理模板 21.递归 22.IO流 1.File 2. ...

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

定义

分类

应用

分析

JS设计模式之代理模式-虚拟代理相关推荐

最新文章

热门文章