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>
相关文章
本文详细讲解了ECMAScript6的基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
本篇适合javascript新手或者学了前端一段时间，对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑，相信对javascript基础薄弱的同学，可以加深对javascript的理解2021-10-10
Promise 是 ES6 新增的一个异步解决方案，它同 await 一样，是异步的解决方案，但是相比于 await，Promise 可以同时统一处理多个异步操作。这一点是很方便的。下面我们来一起学习一下吧2019-06-06
文章对javascript的四种函数模式进行了详细的解释，并附上示例，方便小伙伴们理解并应用，希望对大家能有所帮助。2014-11-11
下面小编就为大家带来一篇浅谈JavaScript函数的四种存在形态。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下2016-02-02
继承的封装貌似在每个语言中都有，在本文为大家详细介绍下，JavaScript的继承的封装，感兴趣的朋友不要错过2013-10-10
javascript SpiderMonkey中的函数序列化如何进行
JavaScript中如何进行函数序列化，函数序列化的作用是什么？本文将介绍SpiderMonkey中的函数序列化，有需要的朋友可以参考下2012-12-12
JavaScript中几个重要的属性(this、constructor、prototype)介绍
this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window，prototype本质上还是一个JavaScript对象，constructor始终指向创建当前对象的构造函数2013-05-05
这篇文章主要介绍了document.querySelector()方法的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论