听说,代理模式真的只是个搞代购的?
存在即合理
总有些东西是值得研究研究的,虽然我对设计模式也不是很懂,但是学习研究了一下还是觉得受益匪浅的。
我们学习每一个知识点的时候都希望能一下子就能领悟,能吸收成为自己所用的技能。当然这也因人而异了
所以无论怎样,在学习研究的道路上,我们都没有放弃过,不抛弃不放弃应该是前端er给自己的一个口号了,加油,不再啰嗦了,直接进入今天的主题吧
代理模式
知其然当然要知其所以然
首先我们要知道什么是代理模式?
- 它是为一个对象提供一个代替品或占位符,以便控制对它的访问
然后在生活当中更是无处不在的
- 歌手的经纪人啊
- 球星(C罗、梅西)的经纪人啊
- 买化妆品的代购啊
- 等等等等
其实容易理解的就是: 遇到什么事,都交给那个有解决能力的人就对了
歌手接受采访经纪人来安排,球星转会俱乐部和经纪人来谈,买国外的化妆品找代购来搞定
光说不练假把式,还是实际一点,一起来看看代理模式在开发中的一些应用吧!
实际应用中是这样的
代理实现图片预加载
大家都知道如果页面加载图片的话,图片资源如果在网络情况较差的时候,加载是需要一些时间的,而且img元素在直接加载时也会出现一段时间的空白,这对体验来说是不好的
所以我们就需要先用一个占位图(如loading图),等真正的图片资源请求完成后再替换掉
下面先来看看代码
let myImg = (function() {let img = document.createElement('img');document.body.appendChild(img);return {// 设置真正的图片资源setSrc(src) {img.src = src;}}
})();// 代理对象proxyImg
let proxyImg = (function() {let img = new Image();img.onload = function() {// 当图片资源加载成功后// 再重新给img的src赋值myImg.setSrc(this.src);}return {setSrc(src) {// 先给img元素设置loading图占位myImg.setSrc('https://p.ssl.qhimg.com/t0103b3b9a54ba2c6f5.gif');img.src = src;}}
})();proxyImg.setSrc('http://p0.so.qhimgs1.com/bdr/326__/t015b81c99692979474.jpg');
OK,通过上面的代码就实现了一个图片代理预加载的技术点。
当然了,有时候会发现,其实不用代理也完全可以实现啊,把img.onload的那些代码写到myImg的代码块中也是OK的啊,何必多此一举,又造了一个代理函数呢?
- 主要是代理函数它的作用是用来预加载处理的,如果以后网速快如闪电的话,那还需要预加载吗?
- 答案肯定是不需要了,那我们就还要回到myImg的代码中去找img.onload的操作,然后再根据无用的代码进行删除(万一删错了怎么办,会出事故的)
- 但用到了代理函数就不需要这样了,不再调用即可了,按照下面这样写就好了
myImg.setSrc('http://p0.so.qhimgs1.com/bdr/326__/t015b81c99692979474.jpg');
合并http请求
在web开发中,最大的开销莫过于就是网络请求了
例如在一些同步文件上传的情况下,如果是点击一个复选框就发送一次请求的话,这样多搞个几次,服务器的压力就会变大了,身为前端不能这么搞服务器的,不够仁义啊
那么应该如何是好呢?不要方,按照代理模式的开发思路应该就是,不用自己亲自上,交给代理来
实现的原理其实就是把点击到的要同步的文件先存起来,然后在一个合理的延迟时间后再统一发送这次的请求就好了(这一步放到代理中来做)
// 同步文件函数
function syncFile(id) {const url = 'xxx.com/index.php';axios.get(url, {params: {id}});
}
let proxySyncFile = (function() {// cache保存一段时间内需要同步的idlet cache = [], timer;return function(id) {cache.push(id);// 保证不会覆盖之前的定时器if (timer) return;timer = setTimeout(function() {// 向2秒后本体发送需要同步的id集合syncFile(cache.join(','));clearTimeout(timer);timer = null;cache.length = 0; // 清空id集合}, 2000);}
})();
以上代码就完成了代理合并http请求的实现了,下面再看一下使用就万事大吉了
// 遍历所有的checkbox元素
let checkbox = document.getElementsByTagName('input');for (let i = 0; i < checkbox.length; i ) {let c = checkbox[i];// 给每一个checkbox元素添加click事件c.onclick = function() {// 被选中的情况下再触发代理函数并传入对应的idif (this.checked === true) {proxySyncFile(this.id);}};
}
缓存代理
缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次计算时
如果传递进来的参数和之前一致,则可以直接返回前面存储的运算结果
下面以最常见的计算乘积的栗子来看一下吧
// 计算乘积栗子function mult() {console.log('开始计算乘积');let a = 1;for (let i = 0, len = arguments.length; i < len; i ) {a = a * arguments[i];}return a;}// 缓存代理let proxyMult = (function() {// 缓存对象,用来存储计算结果用的let cache = {};return function() {const args = Array.prototype.join.call(arguments, ',');// 遍历cache对象,看是否有上一次计算的参数if (args in cache) {console.log('走了缓存');return cache[args];}return cache[args] = mult.apply(this, arguments);}})();console.log(proxyMult(2, 3)); // 开始计算乘积 6console.log(proxyMult(2, 3, 5, 10, 2)); // 开始计算乘积 600console.log(proxyMult(2, 3, 5, 10, 2)); // 走了缓存 600console.log(proxyMult(2, 10, 2)); // 开始计算乘积 40
利用缓存来把开销大的运算暂存起来确实是一种很有效的方法,下面我们再把这个缓存代理做的更通用一些
不管是计算乘积还是计算加和我们都可以通过改造后的缓存代理来实现,看代码
function createProxy(fn) {let cache = {};return function() {const args = Array.prototype.join.call(arguments, ',');if (args in cache) {return cache[args];}return cache[args] = fn.apply(this, arguments);}}
以上代码唯一不同的地方就是把函数通过参数的形式传进去就可以针对不同的计算函数来进行缓存代理了,惟妙惟肖,确实是好方法,哈哈
总结
在开发中代理模式还是很重要的,值得我们多去写写,多去加以实践
以上内容并不是很多,相比之前写的篇幅大大缩减,但是初心不变,依然希望能给大家带来一些好的内容分享出来,哈哈,感谢大家的观看了!
听说,代理模式真的只是个搞代购的?相关推荐
- 代理模式:先生需要代购吗?
"代理"这个词这几年可谓是家喻户晓了,对于"代理模式"我们也可以通过代购的逻辑来进行理解. 本期干货文章,我们来聊聊编程中GOF23种经典模式之一的" ...
- Java 设计模式(十三):代理模式
参考链接:代理模式-Proxy Pattern 近年来,代购已逐步成为电子商务的一个重要分支.代购简单来说就是找人帮忙购买所需要的商品,代购网站就是其中一种产物,它为消费者提供在线的代购服务,如果看中 ...
- [设计模式] - 代理模式(静态代理与动态代理)
文章目录 一.代理模式简介 1. 什么是代理模式 2. 简单举例 二.代理模式的设计思路 1. 代理模式的构成 1. 静态代理 2. 动态代理 (1)接口代理 (2)Cglib代理 三. 代理模式总结 ...
- 一文彻底搞懂代理模式(Proxy)
代理模式 引言 代理模式的定义与特点 代理模式的结构 模式实现 静态代理 动态代理 总结 与装饰者模式 文章已收录我的仓库:Java学习笔记与免费书籍分享 代理模式 引言 代理模式是非常常见的模式,在 ...
- 1小时搞懂设计模式之代理模式(静态代理)
1 什么是代理模式 这个问题让我们用生活的例子来进行解释,在我们买火车票的时候可以通过黄牛帮我们买票 ,或者 我们通过媒婆介绍对象找到我们生活中的另一伴.在或者每个明星需要经纪人帮忙打理他的通告.这些 ...
- 【专题系列】搞定设计模式之—— 十二 :代理模式
点击上方"java大数据修炼之道",选择"设为星标" 优质文章, 第一时间送达 来源 | https://www.cnblogs.com/three-fight ...
- 三分钟带您搞懂代理模式
全文共1439字,预计阅读时间:10分钟 定义: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式是一种比较贴近于生活的 设计模式,现实生活中也有很多代理模式的例子: ...
- 面试官:策略模式和代理模式有什么区别?
大家好,我是田哥,昨天一哥们面试被问到代理模式,刚好,我也正在写<MyBatis源码分析:小白系列>专栏中的代理模式. 这里也说明一下,本文是MyBatis源码分析专栏中的一篇文章. 感兴 ...
- 初探Java设计模式2:结构型模式(代理模式,适配器模式等)
本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...
最新文章
- Magento开发的特点有哪些?
- 如何定义经济的网络(后期可以随意剪枝)
- Symbian 编程总结导读
- Nginx+tomcat负载均衡session问题解决
- VigiBase中搜索和眼病相关的统计数据
- Spring Cloud构建微服务架构:Hystrix监控面板【Dalston版】
- ekf pose使用方法 ros_【百川小课堂】第13课—ROS学习(二)
- Windows安装pytorch-gpu
- 计算机绘图说课视频,机械图识读与计算机绘图说课PPT课件.ppt
- 《HarmonyOS开发 - 小凌派-RK2206开发笔记》第1章 开发环境搭建
- nginx配置静态页面html,nginx 服务器配置静态网页
- scandef格式详细说明
- js爬山之作用域和自由变量~~狂徒李四
- 北大计算机所有专业都分学硕和专硕,毕业后才明白,学硕和专硕的差距不是一星半点,幸好当年没选错...
- ASP.NET 2.0 本地化技术之研究
- java手机教程_Java手机基础教程 (普通高等教育“十二五”规划教材(动漫游戏类))...
- linux克隆tf卡中的内容,TF/SD内存卡数据克隆怎么做教程
- 将要加入linux-2.6.29内核的cred
- 电脑推荐-暂时就写这么多
- SIMetrix教程-001.SIMetrix软件简介与安装
热门文章
- 发现一部不错的电视剧——新梁山伯与祝英台
- java写洗衣机仿真程序
- 怎么让上下两排对齐_word如何解决上下两行文字对不齐
- bitbucket pipeline - caches
- 基于Web的一站式养老院的设计与实现(论文+源码)_kaic
- heic转换成jpg软件
- qt编写网易云界面(8)----专属定制界面
- 五款开发Java电商系统的工具
- javascript 符号_JavaScript中的美元符号($)和下划线(_)
- winformskin_C#.net winform skin 皮肤 大全(转) | 学步园