js文件緩存之版本管理詳解
近幾個(gè)月來的工作是一個(gè)交易系統(tǒng)持續(xù)改進(jìn)項(xiàng)目，迭代發(fā)布周期大約為2~3周。最近一次迭代是V16版，在禮拜三完成發(fā)布。不幸的是，第二天上午就被老大逮過去。原來老大從生產(chǎn)中揪出了一個(gè)bug，大致的問題如下：
系統(tǒng)中有一個(gè)常用的自定義控件，目的是協(xié)助選擇客戶，而V16版的持續(xù)改進(jìn)需求是給控件增加兩個(gè)篩選選項(xiàng)，支持不同的默認(rèn)值配置。很簡(jiǎn)單的一個(gè)需求，代碼修改也簡(jiǎn)單，其中一個(gè)修改是給一個(gè)js文件里邊的一個(gè)函數(shù)增加了一個(gè)傳入?yún)?shù)，用來傳遞配置值。經(jīng)過RC、RTW測(cè)試，一切都顯得很正常，不過上了生產(chǎn)才被發(fā)現(xiàn)bug了。加載出來的客戶明顯不正常、數(shù)目不對(duì)，也與預(yù)期的查詢配置不相符。
檢查控件內(nèi)部跳轉(zhuǎn)鏈接，發(fā)現(xiàn)問題，傳遞的參數(shù)明顯與預(yù)期不符，而這個(gè)鏈接則是由上面修改過的JS函數(shù)生成。因此判定問題是由于客戶端緩存了原版JS文件，新函數(shù)的調(diào)用由舊函數(shù)所替換引發(fā)的。經(jīng)過清除緩存，重新加載頁面后，這個(gè)自定義控件能夠正常工作。很不幸的是，我們是不能通過打電話告訴每一位用戶，你需要清除緩存，然后才能正常使用這個(gè)功能。
到此時(shí)，我才意識(shí)到需要一種方法來控件JS的緩存問題，否則，后續(xù)任何涉及JS文件內(nèi)容的修改，都會(huì)因?yàn)榫彺鏌o法獲取最新JS文件，而導(dǎo)致生產(chǎn)事故。
原則上，我們是需要在有JS更新的時(shí)候，才會(huì)去重新加載JS文件，而不是每次都重新加載，因此第一種做法給JS應(yīng)用地址后添加隨機(jī)參數(shù)是不可取的，因?yàn)樗馕吨瑤缀趺看渭虞d頁面都會(huì)是重新加載JS，而不會(huì)合理的利用緩存JS。但是，我們還有第二種更合理的做法，如果關(guān)注過一些國外網(wǎng)站代碼，會(huì)發(fā)現(xiàn)，他們通常是在js鏈接后添加一個(gè)版本號(hào)參數(shù)，而不是隨機(jī)數(shù)，當(dāng)js代碼發(fā)生修改時(shí)，只需要將版本號(hào)加1，就可以很巧妙的解決通知客戶端更新js文件。不知道，誰是第一個(gè)想到這種方法的人，不過毫無疑問，他是值得我們欽佩的，真是一個(gè)不錯(cuò)的idea的！
附贈(zèng)些許代碼：
<script src="../JavaScript/SelectOpenWindow.js?v=1" type="text/javascript"></script>
相關(guān)文章
本文詳細(xì)講解了ECMAScript6的基礎(chǔ)教程，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇適合javascript新手或者學(xué)了前端一段時(shí)間，對(duì)js概念不清晰的同學(xué)。本文將講述幾點(diǎn)對(duì)于初學(xué)者遇到的javascript的坑，相信對(duì)javascript基礎(chǔ)薄弱的同學(xué)，可以加深對(duì)javascript的理解2021-10-10
Promise 是 ES6 新增的一個(gè)異步解決方案，它同 await 一樣，是異步的解決方案，但是相比于 await，Promise 可以同時(shí)統(tǒng)一處理多個(gè)異步操作。這一點(diǎn)是很方便的。下面我們來一起學(xué)習(xí)一下吧2019-06-06
文章對(duì)javascript的四種函數(shù)模式進(jìn)行了詳細(xì)的解釋，并附上示例，方便小伙伴們理解并應(yīng)用，希望對(duì)大家能有所幫助。2014-11-11
淺談JavaScript函數(shù)的四種存在形態(tài)
下面小編就為大家?guī)硪黄獪\談JavaScript函數(shù)的四種存在形態(tài)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
Javascript實(shí)現(xiàn)的SHA-256加密算法完整實(shí)例
這篇文章主要介紹了Javascript實(shí)現(xiàn)的SHA-256加密算法,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)SHA-256加密的具體步驟與相關(guān)技巧,需要的朋友可以參考下2016-02-02
繼承的封裝貌似在每個(gè)語言中都有，在本文為大家詳細(xì)介紹下，JavaScript的繼承的封裝，感興趣的朋友不要錯(cuò)過2013-10-10
javascript SpiderMonkey中的函數(shù)序列化如何進(jìn)行
JavaScript中如何進(jìn)行函數(shù)序列化，函數(shù)序列化的作用是什么？本文將介紹SpiderMonkey中的函數(shù)序列化，有需要的朋友可以參考下2012-12-12
JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
this表示當(dāng)前對(duì)象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁面對(duì)象window，prototype本質(zhì)上還是一個(gè)JavaScript對(duì)象，constructor始終指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)2013-05-05
這篇文章主要介紹了document.querySelector()方法的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03