结构型设计模式之代理模式

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

开篇

代理模式：由于一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起的中介的作用。

一说到代理，可能大家第一反应就是解决跨域问题。没错，日常开发过程中，大家解决跨域问题的几种常见方案就是代理模式的一种应用。

跨域代理方案

proxy配置

在开发模式的时候，我们经常会使用这种方式来解决跨域问题。

    proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    }

这种方式的原理其实相对比较好理解：就是启动了一个后端服务，配置了Access-Control-Allow-Origin允许跨域，这个时候请求访问到这个服务之后，接着转发到目标服务从而解决了跨域问题。

nginx代理

对于线上模式，我们无法通过配置proxy的方式来解决跨域问题，这个时候我们常见的作法一般是配置nginx代理。

    server {
        listen 8000; 
        server_name 192.168.2.116;
        location /api { 
            proxy_pass http://localhost:3000; 
        } 
    }

nginx解决跨域的原理其实也很简单，通过访问跟web同源的地址来绕过浏览器的跨域问题，然后在按照配置的规则将服务转发到对应的目标服务上。

预加载代理

有经验的小伙伴肯定会注意到这样一种情况：那就是当网络情况不好或者加载的图片资源过大的时候，在资源加载完成之前一直是空白状态，非常影响用户体验。对于这种问题，我们通常的解决方案是，先放一张占位的加载中的图片，然后加载图片资源，当图片资源加载完成之后，在将图片的src进行替换。

这种解决方式其实也是代理模式的一种应用。

    const imgNode = new Image();
    
    document.body.appendChild( imgNode );
    
    const proxyImage = ((link) => {
        const img = new Image();
        
        img.onload = function() {
            imgNode.src = link;
        }
        
        imgNode.src = 'loading.jpg';
        img.src = src;
    })();
    
    proxyImage('https://123.com/product.jpg');

结语

代理模式解决了业务之间的耦合性问题，也可以解决系统的开销问题。通过代理模式可以更好的缓冲业务，给用户提供更好的体验。

好的，有关代理模式的内容我们就聊到这里了，希望对大家有所帮助。欢迎大家在下方留言交流。