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编程起步(第二课)
Feb 27 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JS正则表达式验证端口范围(0-65535)
Jan 06 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php 异常处理实现代码
2009/03/10 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python super()方法原理详解
2020/03/31 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Keras搭建自编码器操作
2020/07/03 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
财务信息服务专业自荐书范文
2014/02/08 职场文书
运动会的口号
2014/06/09 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年教研组工作总结
2015/05/04 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
调研报告的主要写法
2019/04/18 职场文书
慰问信(范文3篇)
2019/10/23 职场文书