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

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

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

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

总结

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

以上就是代理模式在vue中的使用示例解析的详细内容，更多关于vue 代理模式的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3如何使用eventBus订阅发布模式

    目录 Ⅰ. 什么是eventBus? Ⅱ. vue3 如何使用 步骤一 (eventBus 容器) 步骤二 ( 订阅者 ) 步骤三 ( 发布者 ) 总结 Ⅰ. 什么是eventBus? 通俗的讲,就是在任意一个组件,想把消息(参数) -> 传递到任意一个组件 ,并执行一定逻辑. Ⅱ. vue3 如何使用 eventBus vue3中没有了,eventBus,所以我们要自己写,但是非常简单. 步骤一 (eventBus 容器) 在src目录,创建个bus文件夹,存放 自己写的 bus.js : 编

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • 装饰者模式在日常开发中的缩影和vue中的使用详解

    目录 一.日常开发 1.数据埋点 2.表单校验 二.框架功能(vue) 1.数组监听 2.重写挂载 总结 一.日常开发 装饰者模式以其不改变原对象,并且与原对象有着相同接口的特点,广泛应用于日常开发和主流框架的功能中. 1.数据埋点 假如我们开发了一个移动端网页,有图书搜索.小游戏.音频播放和视频播放等主要功能,初期,我们并不知道这几个功能用户的使用规律. 有一天,产品经理说,我想要各个功能用户的使用规律,并且通过echarts绘制折线图和柱状图,能加吗? 这就加...... 起初: <butt

  • vue history模式刷新404原因及解决方法

    目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案

  • vue2从数据变化到视图变化发布订阅模式详解

    目录 引言 一.发布订阅者模式的特点 二.vue中的发布订阅者模式 1.dep 2.Object.defineProperty 3.watcher 4.dep.depend 5.dep.notify 6.订阅者取消订阅 小结 引言 发布订阅者模式是最常见的模式之一,它是一种一对多的对应关系,当一个对象发生变化时会通知依赖他的对象,接受到通知的对象会根据情况执行自己的行为. 假设有财经报纸送报员financialDep,有报纸阅读爱好者a,b,c,那么a,b,c想订报纸就告诉financialDe

  • Vue uni-app以H5模式引入Jquery配置教程

    目录 Vue配置Jquery uni-app配置Jquery 总结 Vue配置Jquery 安装Jquery npm install jquery --save or yarn add jquery main.js中引入jquery,供全局使用 import Vue from 'vue' import jquery from "jquery"; Vue.prototype.$ = jquery; 在页面中使用,运行如下代码,在控制台就可以查看引入结果 <template>

  • mint-ui在vue中的使用示例

    本文介绍了mint-ui在vue中的使用示例,分享给大家,具体如下: 首先放上 mint-ui中文文档 近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档 刚好自己在用,网上能找到的资料也不是很详细,自己写写咯.持续更新...emmmmm,应该可以吧,我这么懒.希望能给别人带来帮助. 介绍一下mint-ui的特性 特性介绍 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • 发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • Elasticsearch在应用中常见错误示例解析

    目录 一 read_only_allow_delete" : "true" 二 illegal_argument_exception 三 Result window is too large 一 read_only_allow_delete" : "true" 当我们在向某个索引添加一条数据的时候,可能(极少情况)会碰到下面的报错: { "error": { "root_cause": [ { "

  • vue中 $forceUpdate的使用解析

    目录 方案分析 forceUpdate 本质 实现原理 分析 刷新页面 使用v-if标记 key-changing 在vue的开发过程中,数据的绑定通常来说都不用我们操心,例如在​​data​​中有一个​​msg​​的变量,只要修改它,那么在页面上,​​msg​​的内容就会自动发生变化.但是如果对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的​​length​​变成0,vue可能就无法知道发生了改变.这个其实就是考验对于双向绑定的更进一步的理解应用了.在V

  • 如何在vue中使用jointjs过程解析

    在vue中引入joint.js的问题,之前在网上搜了很多,都没有给出一个确切的答案,捣鼓了两天终于弄明白了,做个记录. 首先,我参考了一篇来自stackoverflow的文章 看完这篇文章,大家应该至少大致怎么做了,下面我们来具体看一下: 首先在vue项目中运行npm install jointjs --save 然后在入口文件,我的是main.js,也有可能是app.js中加入下面两行,把joint.js和jquery作为全局变量 window.$ = require('jquery'); w

  • Vue中Video标签播放解析后短视频去水印无响应解决

    Vue中Video标签播放解析后短视频去水印无响应解决

    目录 问题: 情景复现: 链接在Video标签打不开 链接浏览器正常打开 出现的原理 解决方式 前端解决 全局添加标签 Vue单页面添加标签 完美解决: 问题: 发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url 情景复现: 前端发送请求到后端接口 我们前端打

  • 实例讲解如何在iOS应用开发中使用设计模式中的代理模式

    实例讲解如何在iOS应用开发中使用设计模式中的代理模式

    代理模式是OC中一种常见的设计模式,那么什么是代理模式呢?举个栗子,假设你是一个日发货量过万的淘宝卖家(A),但是每天的派件不可能你本人或者让你的员工去派件,因此你发布了一条信息(B),上面注明各种要求,各大快递公司看到有那么大的利益纷纷上门沟通,最后你选择了一件快递公司(C).那么在上面的例子中,我们即是委托人,发布的信息即协议(protocol),上面规定了派件人需要完成的事,而最后选择的快递公司也就是代理人(delegate),代理我们去派件. 类图: 根据以上类图,可以知道在代理模式中的

  • C++设计模式编程中proxy代理模式的使用实例

    C++设计模式编程中proxy代理模式的使用实例

    代理模式典型的结构图为: 实际上,代理模式的想法非常简单. 代理模式的实现: 完整代码示例(code):代理模式的实现很简单,这里为了方便初学者的学习和参考,将给出完整的实现代码(所有代码采用 C++实现,并在 VC 6.0 下测试运行). 代码片断 1:Proxy.h //Proxy.h #ifndef _PROXY_H_ #define _PROXY_H_ class Subject{ public: virtual ~Subject(); virtual void Request() =

随机推荐