文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-12-22 12:00

关注

引言

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

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

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

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

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项目的过程中,会和后端进行接口的联调。

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

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

总结

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

以上就是代理模式在vue中的使用示例解析的详细内容,更多关于vue 代理模式的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯