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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
javascript实现简单留言板案例
Feb 09 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生成随机数或者字符串的代码
2008/09/05 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
python实现的简单文本类游戏实例
2015/04/28 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
解放思想演讲稿
2014/09/11 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
天坛导游词
2015/02/02 职场文书
前台岗位职责
2015/02/13 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Python制作表白爱心合集
2022/01/22 Python
DSP接收机前端设想
2022/04/05 无线电
VUE递归树形实现多级列表
2022/07/15 Vue.js
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers