设计模式 — — 代理模式

一、是什么

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

生活场景：

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

二、使用

const proxy = new Proxy(target, handler);
1

按照功能来划分，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' );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 使用代理模式后，图片本地对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口；

• 代理对象负责在图片未加载完成之前，引入预加载的loading图，负责了图片预加载的功能