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 相关文章推荐
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
理解javascript异步编程
Jan 27 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
js+css3实现炫酷时钟
Aug 18 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
用vue设计一个日历表
Dec 03 Vue.js
微信小程序实现音乐播放页面布局
Dec 11 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
单击复制文字兼容各浏览器的完美解决方案
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
php cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
PHP安全性漫谈
2012/06/28 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
Javascript实现的分页函数
2006/12/22 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
微信小程序实现蓝牙打印
2019/09/23 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
小学教师的自我评价范例
2013/10/31 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
springboot实现string转json json里面带数组
2022/06/16 Java/Android