js文件缓存之版本管理详解


Posted in Javascript onJuly 05, 2013

近几个月来的工作是一个交易系统持续改进项目,迭代发布周期大约为2~3周。最近一次迭代是V16版,在礼拜三完成发布。不幸的是,第二天上午就被老大逮过去。原来老大从生产中揪出了一个bug,大致的问题如下:

系统中有一个常用的自定义控件,目的是协助选择客户,而V16版的持续改进需求是给控件增加两个筛选选项,支持不同的默认值配置。很简单的一个需求,代码修改也简单,其中一个修改是给一个js文件里边的一个函数增加了一个传入参数,用来传递配置值。经过RC、RTW测试,一切都显得很正常,不过上了生产才被发现bug了。加载出来的客户明显不正常、数目不对,也与预期的查询配置不相符。

检查控件内部跳转链接,发现问题,传递的参数明显与预期不符,而这个链接则是由上面修改过的JS函数生成。因此判定问题是由于客户端缓存了原版JS文件,新函数的调用由旧函数所替换引发的。经过清除缓存,重新加载页面后,这个自定义控件能够正常工作。很不幸的是,我们是不能通过打电话告诉每一位用户,你需要清除缓存,然后才能正常使用这个功能。

到此时,我才意识到需要一种方法来控件JS的缓存问题,否则,后续任何涉及JS文件内容的修改,都会因为缓存无法获取最新JS文件,而导致生产事故。

原则上,我们是需要在有JS更新的时候,才会去重新加载JS文件,而不是每次都重新加载,因此第一种做法给JS应用地址后添加随机参数是不可取的,因为它意味着,几乎每次加载页面都会是重新加载JS,而不会合理的利用缓存JS。但是,我们还有第二种更合理的做法,如果关注过一些国外网站代码,会发现,他们通常是在js链接后添加一个版本号参数,而不是随机数,当js代码发生修改时,只需要将版本号加1,就可以很巧妙的解决通知客户端更新js文件。不知道,谁是第一个想到这种方法的人,不过毫无疑问,他是值得我们钦佩的,真是一个不错的idea的!

附赠些许代码:
<script src="../JavaScript/SelectOpenWindow.js?v=1" type="text/javascript"></script>

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Vue分页组件实例代码
Apr 17 Javascript
js实现select下拉框选择
Jan 11 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 #Javascript
把input初始值不写value的具体实现方法
Jul 04 #Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 #Javascript
简单实用jquery版三级联动select示例
Jul 04 #Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 #Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 #Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
使用无限生命期Session的方法
2006/10/09 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python实现列表中由数值查到索引的方法
2018/06/27 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Django实现文件上传下载
2019/10/06 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
优良学风班总结材料
2014/02/08 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2014小学年度工作总结
2014/12/20 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
基于PyQt5制作一个群发邮件工具
2022/04/08 Python