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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
element 动态合并表格的步骤
Dec 31 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
PHP文件上传实例详解!!!
2007/01/02 PHP
PHP伪造referer实例代码
2008/09/20 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
python定时器使用示例分享
2014/02/16 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
给小学生的新年寄语
2014/04/04 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
妈妈别哭观后感
2015/06/08 职场文书