当前位置：首页 > news >正文

设计模式 — — 代理模式

news 2025/9/11 15:59:49

一、是什么

代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的

生活场景：

租房、买房，比如链家等房屋中介机构，起到的作用就是代理

二、使用

const proxy = new Proxy(target, handler);

按照功能来划分，js代理模式常见：

缓存代理
虚拟代理

1、缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果

2、虚拟代理

虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建，常见的就是图片预加载功能

// 图片本地对象，负责往页面中创建一个img标签，并且提供一个对外的setSrc接口
let myImage = (function(){let imgNode = document.createElement( 'img' );document.body.appendChild( imgNode );return {//setSrc接口，外界调用这个接口，便可以给该img标签设置src属性setSrc: function( src ){imgNode.src = src;}}
})();
// 代理对象，负责图片预加载功能
let proxyImage = (function(){// 创建一个Image对象，用于加载需要设置的图片let img = new Image;img.onload = function(){// 监听到图片加载完成后，给被代理的图片本地对象设置src为加载完成后的图片myImage.setSrc( this.src );}return {setSrc: function( src ){// 设置图片时，在图片未被真正加载好时，以这张图作为loading，提示用户图片正在加载myImage.setSrc( 'https://img.zcool.cn/community/01deed576019060000018c1bd2352d.gif' );img.src = src;}}
})();proxyImage.setSrc( 'https://xxx.jpg' );