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

 更新时间:2013年07月05日 15:00:22   转载 作者:  
以前也做过不少项目,但从来就没有把关注的目光投向过js文件缓存。最近终于在毫无意识的情况下跳进了这个大坑

近几个月来的工作是一个交易系统持续改进项目,迭代发布周期大约为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中的函数、对象

    详解JavaScript中的函数、对象

    这篇文章主要介绍了JavaScript中的函数、对象,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js array数组对象操作方法汇总

    js array数组对象操作方法汇总

    这篇文章主要介绍了js array数组对象操作方法汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解Javascript 装载和执行

    详解Javascript 装载和执行

    本文主要详细介绍了Javascript 装载和执行,并附上了详细示例,给有需要的小伙伴们参考下吧
    2014-11-11
  • Js中setTimeout()和setInterval() 何时被调用执行的用法

    Js中setTimeout()和setInterval() 何时被调用执行的用法

    本篇文章,小编将为大家介绍Js中setTimeout()和setInterval() 何时被调用执行的用法,有需要的朋友可以参考一下
    2013-04-04
  • Javascript浅谈之this

    Javascript浅谈之this

    这篇文章主要介绍了Javascript中的this,有需要的朋友可以参考一下
    2013-12-12
  • Javascript基础回顾之(三) js面向对象

    Javascript基础回顾之(三) js面向对象

    本篇是你必须知道的Javascript系列第三篇,我们主要来看看Javascript是如何面向对象的编程的,需要的朋友可以参考下
    2017-01-01
  • JavaScript箭头(arrow)函数详解

    JavaScript箭头(arrow)函数详解

    本文讲的是从初学者的角度详解Javascript ES6中的箭头函数(Arrow Functions)的基础知识, ES6可以使用“箭头”定义函数,注意是函数,不要使用这种方式定义类(构造器)
    2017-06-06
  • Javascript学习笔记之相等符号与严格相等符号

    Javascript学习笔记之相等符号与严格相等符号

    本文详细介绍了javascript中的相等符号以及严格相等符号,需要的朋友可以参考下
    2014-11-11
  • Javascript基础教程之变量

    Javascript基础教程之变量

    大家都知道javascript是可以隐式声名变量的。但要注意,隐式声名变量总是被创建为全局变量。看以下代码,情愿javascript语言强制声明变量。建议大家一定要var声明变量。
    2015-01-01
  • javascript对象之内置对象Math使用方法

    javascript对象之内置对象Math使用方法

    Math对象的一些方法能实现我们课本上的某些数学计算,比较常用的方法有如下几个
    2010-04-04

最新评论