iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >代理模式在vue中的使用示例解析
  • 386
分享到

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

vue代理模式vue代理模式使用 2022-12-22 12:12:36 386人浏览 独家记忆
摘要

目录引言1、图片预加载2、缓存代理3、跨域代理总结引言 当本体处于保护、缓存、虚拟或者过滤等情况下时,一个数据不适合被访问或者一个方法不能被直接调用,可以采用代理模式,先创建一个代理

引言

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

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

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

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

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 代理模式的资料请关注编程网其它相关文章!

--结束END--

本文标题: 代理模式在vue中的使用示例解析

本文链接: https://www.lsjlt.com/news/175533.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 代理模式在vue中的使用示例解析
    目录引言1、图片预加载2、缓存代理3、跨域代理总结引言 当本体处于保护、缓存、虚拟或者过滤等情况下时,一个数据不适合被访问或者一个方法不能被直接调用,可以采用代理模式,先创建一个代理...
    99+
    2022-12-22
    vue 代理模式 vue 代理模式使用
  • Java的代理模式示例分析
    这篇文章主要讲解了“Java的代理模式示例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java的代理模式示例分析”吧!定义代理模式(Proxy Parttern) 为一个对象提供一个替...
    99+
    2023-06-29
  • web前端中代理模式的示例分析
    这篇文章主要为大家展示了“web前端中代理模式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web前端中代理模式的示例分析”这篇文章吧。代理模式(Pr...
    99+
    2022-10-19
  • JavaScript设计模式之代理模式的示例分析
    这篇文章主要为大家展示了“JavaScript设计模式之代理模式的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript设计模式之代理模式的...
    99+
    2022-10-19
  • Java代理模式的示例详解
    目录定义案例需求方案:静态代理模式总结定义 代理模式(Proxy Parttern) 为一个对象提供一个替身,来控制这个对象的访问,即通过代理对象来访问目标对象,这样做的话好处是可以...
    99+
    2022-11-13
  • vue中状态管理模式vuex的示例分析
    这篇文章主要介绍了vue中状态管理模式vuex的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。vuex是一个专门为vue.js设计的...
    99+
    2022-10-19
  • vue模式history下在iis中配置的示例分析
    小编给大家分享一下vue模式history下在iis中配置的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.npm r...
    99+
    2022-10-19
  • Java结构型设计模式中代理模式示例详解
    目录代理模式分类主要角色作用静态代理与动态代理的区别静态代理的基本使用创建抽象主题创建真实主题创建代理主题客户端调用JDK动态代理的基本使用创建抽象主题创建真实主题创建代理主题客户端...
    99+
    2022-11-13
  • js设计模式之代理模式及订阅发布模式的示例分析
    这篇文章将为大家详细讲解有关js设计模式之代理模式及订阅发布模式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1,代理模式,只是学习了虚拟代理以及缓存代理,具体...
    99+
    2022-10-19
  • Vue中响应式原理的示例分析
    这篇文章主要介绍了Vue中响应式原理的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Vue 嘴显著的特性之一便是响应式系统(reac...
    99+
    2022-10-19
  • Nginx工作模式及代理配置的示例分析
    小编给大家分享一下Nginx工作模式及代理配置的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、Nginx 的工作模式1.单进程模式单进程模式下,Ngi...
    99+
    2023-06-29
  • web前端中迭代器模式的示例分析
    这篇文章将为大家详细讲解有关web前端中迭代器模式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。迭代器模式(Iterator Pattern)如果你看到这,ES...
    99+
    2022-10-19
  • AngularJS中使用模块组织代码的示例分析
    本篇文章给大家分享的是有关AngularJS中使用模块组织代码的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。下载 modu...
    99+
    2022-10-19
  • Vue模拟响应式原理底层代码实现的示例
    目录1.Vue.js功能:2.Observer.js功能(数据劫持):3.Compiler.js功能:4.Dep.js功能:5.Watcher.js功能:整体分析Vue的基本结构如下...
    99+
    2022-11-12
  • js中解析顺序、作用域、严格模式的示例分析
    小编给大家分享一下js中解析顺序、作用域、严格模式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、javascrip...
    99+
    2022-10-19
  • Python使用设计模式中的责任链模式与迭代器模式的示例
    责任链模式 责任链模式:将能处理请求的对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理请求为止,避免请求的发送者和接收者之间的耦合关系。 #encoding=utf-8 # #by pan...
    99+
    2022-06-04
    模式 示例 迭代
  • vuejs中vuex状态管理模式的示例分析
    这篇文章给大家分享的是有关vuejs中vuex状态管理模式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来...
    99+
    2022-10-19
  • vue 中简单使用mock的示例代码详解
    一、首先,在vue项目中,安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install m...
    99+
    2022-11-13
  • vue中computed和watch的使用实例代码解析
    需求: 1.点击按钮实现天气的切换;2.用watch进行监视天气产生变化的数据; 实现代码(helloworld.vue实现代码): <template> <...
    99+
    2022-11-13
  • golang中vue使用websocket的示例分析
    小编给大家分享一下golang中vue使用websocket的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一. 编写golang服务端导入必要的webs...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作