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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
React如何解决fetch跨域请求时session失效问题
Nov 02 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和ACCESS写聊天室(八)
2006/10/09 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
python之信息加密题目详解
2019/06/26 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
教师学习三严三实心得体会
2014/10/13 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
小学总务工作总结
2015/08/13 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis