编程 Javascript

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>

js文件缓存之版本管理详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js正确判断用户名cookie是否存在的方法

Jan 28 Javascript

js改变鼠标的形状和样式的方法

Mar 31 Javascript

js中this的用法实例分析

Jan 10 Javascript

JavaScript数组随机排列实现随机洗牌功能

Mar 19 Javascript

简单介绍jsonp 使用小结

Jan 27 Javascript

【JS+CSS3】实现带预览图幻灯片效果的示例代码

Mar 17 Javascript

全面了解构造函数继承关键apply call

Jul 26 Javascript

Node.js编写CLI的实例详解

May 17 Javascript

react开发教程之React 组件之间的通信方式

Aug 12 Javascript

微信小程序实现简单表格

Feb 14 Javascript

基于layui轮播图满屏是高度自适应的解决方法

Sep 16 Javascript

js判断在哪个浏览器打开项目的方法

Jan 21 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

Laravel 5.3 学习笔记之安装

2016/08/28 PHP

PHP编译configure时常见错误的总结

2017/08/17 PHP

JS无法捕获滚动条上的mouse up事件的原因猜想

2012/03/21 Javascript

JavaScript高级程序设计（第3版）学习笔记7 js函数（上）

2012/10/11 Javascript

JQuery中操作Css样式的方法

2014/02/12 Javascript

调用DOM对象的focus使文本框获得焦点

2014/02/19 Javascript

详解js闭包

2014/09/02 Javascript

JavaScript实现生成GUID（全局统一标识符）

2014/09/05 Javascript

使用AmplifyJS组件配合JavaScript进行编程的指南

2015/07/28 Javascript

JavaScript阻止回车提交表单的方法

2015/12/30 Javascript

第一次接触JS require.js模块化工具

2016/04/17 Javascript

iScroll.js 使用方法参考

2016/05/16 Javascript

客户端验证用户名和密码的方法详解

2016/06/16 Javascript

前端js实现文件的断点续传后端PHP文件接收

2016/10/14 Javascript

Angular使用ng-messages与PHP进行表单数据验证

2016/12/28 Javascript

ES6数组的扩展详解

2017/04/25 Javascript

vue 实现 ios 原生picker 效果及实现思路解析

2017/12/06 Javascript

vue项目中使用ueditor的实例讲解

2018/03/05 Javascript

jQuery实现判断上传图片类型和大小的方法示例

2018/04/11 jQuery

JavaScript递归函数解“汉诺塔”算法代码解析

2018/07/05 Javascript

layui获取多选框中的值方法

2018/08/15 Javascript

vue打开子组件弹窗都刷新功能的实现

2020/09/21 Javascript

在Windows8上的搭建Python和Django环境

2014/07/03 Python

Python基于正则表达式实现检查文件内容的方法【文件检索】

2017/08/30 Python

Python基础学习之常见的内建函数整理

2017/09/06 Python

Python实现随机选择元素功能

2017/09/14 Python

python实现感知器

2017/12/19 Python

python的socket编程入门

2018/01/29 Python

pygame实现烟雨蒙蒙下彩虹雨

2019/11/11 Python

关于pytorch处理类别不平衡的问题

2019/12/31 Python

如何在python中处理配置文件代码实例

2020/09/27 Python

韩国现代百货官网：Hmall

2018/03/21 全球购物

欧洲最大的品牌水上运动服装和设备在线零售商：Wuituit Outlet

2018/05/05 全球购物

残疾人小组计划书

2014/04/27 职场文书

员工廉洁自律承诺书

2014/05/26 职场文书

vue3 自定义图片放大器效果的示例代码

2022/07/23 Vue.js