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 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
javascript实现雪花飘落效果
Aug 19 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 编程的 5个良好习惯
2009/02/20 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
js判断浏览器的比较全的代码
2007/02/13 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python中的二维列表实例详解
2018/06/19 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
大学学生会辞职信
2015/05/13 职场文书
初中数学教学反思范文
2016/02/17 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
导游词之江南周庄
2019/12/06 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript