代理模式浅谈和在vue中的使用

最新推荐文章于 2024-05-30 13:37:50 发布

东方睡衣

最新推荐文章于 2024-05-30 13:37:50 发布

阅读量401

点赞数

文章标签：代理模式 vue.js 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/128841239

版权

代理模式在前端开发中有着重要应用，如图片预加载、缓存管理和跨域请求。图片预加载通过代理对象避免了慢速网络下图片加载不完整的问题；缓存代理能存储计算结果，减少重复计算；跨域代理则解决了前端直接访问后端接口的跨域限制。总结中提到，代理模式可按需求灵活添加，包括缓存、防火墙、保护和跨域等多种形式。

摘要由CSDN通过智能技术生成

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

本体访问和代理访问的区别不使用代理：访问 ==> 本体使用代理：访问 ==> 代理 ==> 本体

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，有以下两种访问方式：