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 相关文章推荐
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
jquery默认校验规则整理
Mar 24 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
javascript计时器详解
Feb 28 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 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
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
教育实习生的自我评价分享
2013/11/21 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
收入证明申请书
2015/06/12 职场文书
运动会宣传语
2015/07/13 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
高一军训口号
2015/12/25 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
webpack的移动端适配方案小结
2021/07/25 Javascript