代理模式在vue中的使用示例解析

时间:2022-12-24 qb 人气:0

引言

当本体处于保护、缓存、虚拟或者过滤等情况下时，一个数据不适合被访问或者一个方法不能被直接调用，可以采用代理模式，先创建一个代理（本体对象或者方法的替身），作为访问者和本体之间的中介或者桥梁。

本体访问和代理访问的区别

不使用代理：访问 ==> 本体

使用代理：访问 ==> 代理 ==> 本体

1、图片预加载

// 本体
var myImage = (function () {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function (src) {
            imgNode.src = src;
        }
    }
})()
// 代理
var proxyImage = (function(){
    var img = new Image(); 
    img.onload = function(){
        myImage.setSrc( this.src );
    } 
    return { 
        setSrc: function( src ){ 
            myImage.setSrc( '预加载的图片' ); 
            img.src = src;
        } 
    } 
})();

以上是本体和代理，都有相同的接口setSrc，有以下两种访问方式：

直接访问本体

myImage.setSrc("目标图片地址")

如果网速不太好，直接访问本体，那么会出现图片一截一截出现的情况。

访问代理对象

proxyImage.setSrc("目标图片地址")

如果网速不太好，可以先显示默认的loading图，给用户以预期。当目标图片加载完成的时候，再将当前的loading图换成目标图片地址。

2、缓存代理

// 本体计算乘积
var mult = function(){
    var a = 1; 
    for ( var i = 0, l = arguments.length; i < l; i++ ){ 
        a = a * arguments[i]; 
    } 
    return a; 
}; 
// 代理计算乘积
var proxyMult = (function(){ 
    var cache = {}; 
    return function(){ 
        var args = Array.prototype.join.call( arguments, ',' ); 
        if ( args in cache ){ 
            return cache[ args ]; 
        } 
        return cache[ args ] = mult.apply( this, arguments ); 
    } 
})();

以上是本体和代理，都可以通过传递参数计算乘积，有以下两种访问方式：

本体计算乘积

console.log(mult( 1, 2, 3, 4 )); // 24

计算会得出24的乘积，如果再次计算会再次进行计算，如果数据量比较大的话，会重复计算；

代理计算乘积

console.log(proxyMult( 1, 2, 3, 4 )); // 24

第一次计算会计算出24的乘积，并将其存到cache中，如cache["1,2,3,4"] = 24,第二次计算的时候，发现cache中有键为"1,2,3,4"的乘积，无需重复计算，直接返回。

3、跨域代理

在日常开发vue项目的过程中，会和后端进行接口的联调。

如果我们直接访问后端接口，可能会出现跨域的问题。

我们可以通过配置webpack的devServer配置，先访问本地的代理服务器，代理服务器去访问后端服务器。因为，服务器访问服务器没有跨域的说法，所以，通过本地代理服务器作为中介，我们就实现了前端访问后端接口的目的。

总结

在代理模式中本体和代理有着相同的访问接口或者执行后有同样的效果，那么，开发前无需刻意进行代理模式的预测，当需要的时候再去对本体进行代理功能的编写。根据功能的不同，代理模式又可分为，缓存代理、防火墙代理、保护代理和跨域代理等模式。

加载全部内容