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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
JS画线(实例代码)
Nov 20 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
Paypal支付不完全指北
Jun 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
js对象的比较
2011/02/26 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
简述JS控制台的使用
2018/07/15 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python any()函数的使用方法
2019/10/28 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
美德好少年事迹材料
2014/01/19 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
临床医学专业求职信
2014/08/08 职场文书
合作协议书模板
2014/10/10 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
python 批量压缩图片的脚本
2021/06/02 Python