代理模式
2020/8/3 13:03:52
本文主要是介绍代理模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
代理模式
代理模式主要是为真正的对象提供一个替代品,以便控制外界对这个对象的访问。
代理模式按照使用目的可以划分为很多种类型:比如远程代理、缓存代理、保护代理、虚拟代理、同步代理等等,在 JavaScript 中,使用频率较高的当属缓存代理和虚拟代理。
缓存代理
为一些开销较大的运算结果提供临时的储存空间,以便可以共享这些结果。
使用场景
比如我们经常遇到的分页,理想的效果一定是:同一页的数据只需从后台请求一次,再次点击该页的时候,会直接使用缓存的数据。
例子:
<style> ul { display: flex; flex-direction: row; padding-left: 0; } ul li { list-style: none; } </style> <table> </table> <ul> <li> <button id="page01" onclick="proxyFn(event)">1</button> </li> <li> <button id="page02" onclick="proxyFn(event)">2</button> </li> </ul> <script> var creatDom = function (list) { document.querySelector("table").innerHTML = " "; list.slice(0, 2).forEach(function (v) { var _dom = document.createElement("tr"); _dom.innerHTML = v; document.querySelector("table").appendChild(_dom); }); } var proxyFn = (function (e) { // 创建代理 data,用以缓存数据 var data = {}; return function (e) { // 如果有缓存数据,则直接使用 if (data[e.currentTarget.id]) { creatDom(data[e.currentTarget.id]); console.log("使用缓存数据!"); return; } // 第一次请求后台数据 // 更新页面并存入缓存代理 var _arr = []; for (var i = 0; i < 10000; i++) { _arr.push(Math.ceil(Math.random() * 10) + i); } creatDom(_arr); data[e.currentTarget.id] = _arr; } })(); </script>
虚拟代理
由代理去创建一些开销较大的对象,而真正的对象将延迟创建。
使用场景
比如现在的很多应用都会收集用户的浏览信息,以便有针对性的提供商品。
但如果用户每选中一个多选框,就会向服务器发送请求,如此频繁的网络请求一定会带来巨大的开销,理想的解决方法是:收集一段时间内的请求,统一发送给服务器。
例子:
<style> ul { display: flex; flex-direction: row; padding-left: 0;y } ul li { list-style: none; } </style> <ul> <li><input type="checkbox" value="衣服">衣服</li> <li><input type="checkbox" value="玩具">玩具</li> </ul> <ul> <li><input type="checkbox" value="衣服">衣服</li> <li><input type="checkbox" value="玩具">玩具</li> </ul> <ul> <li><input type="checkbox" value="衣服">衣服</li> <li><input type="checkbox" value="玩具">玩具</li> </ul> <script> var domList=[...document.querySelectorAll("input[type=checkbox]")]; domList.forEach(function(v){ v.addEventListener("click",function(){ if(v.checked===true){ proxyFn(v.value); } }); }); var proxyFn = (function () { // 创建代理,以便合并多个HTTP请求 var data=[],timer; return function(value){ data.push(value); // 如果用户多次点击,保证只执行一次定时器 if(timer){ return; } // 每隔两秒钟,向服务器发送一次请求 timer=setTimeout(function(){ console.log("向服务器发送:"+data.join()); data=[]; clearTimeout(timer); timer=null; },3000); } })(); </script>
如有错误,欢迎指正,本人不胜感激。
这篇关于代理模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求