欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js文件緩存之版本管理詳解

 更新時間:2013年07月05日 15:00:22   作者:  
以前也做過不少項目,但從來就沒有把關(guān)注的目光投向過js文件緩存。最近終于在毫無意識的情況下跳進了這個大坑

近幾個月來的工作是一個交易系統(tǒng)持續(xù)改進項目,迭代發(fā)布周期大約為2~3周。最近一次迭代是V16版,在禮拜三完成發(fā)布。不幸的是,第二天上午就被老大逮過去。原來老大從生產(chǎn)中揪出了一個bug,大致的問題如下:

系統(tǒng)中有一個常用的自定義控件,目的是協(xié)助選擇客戶,而V16版的持續(xù)改進需求是給控件增加兩個篩選選項,支持不同的默認值配置。很簡單的一個需求,代碼修改也簡單,其中一個修改是給一個js文件里邊的一個函數(shù)增加了一個傳入?yún)?shù),用來傳遞配置值。經(jīng)過RC、RTW測試,一切都顯得很正常,不過上了生產(chǎn)才被發(fā)現(xiàn)bug了。加載出來的客戶明顯不正常、數(shù)目不對,也與預期的查詢配置不相符。

檢查控件內(nèi)部跳轉(zhuǎn)鏈接,發(fā)現(xiàn)問題,傳遞的參數(shù)明顯與預期不符,而這個鏈接則是由上面修改過的JS函數(shù)生成。因此判定問題是由于客戶端緩存了原版JS文件,新函數(shù)的調(diào)用由舊函數(shù)所替換引發(fā)的。經(jīng)過清除緩存,重新加載頁面后,這個自定義控件能夠正常工作。很不幸的是,我們是不能通過打電話告訴每一位用戶,你需要清除緩存,然后才能正常使用這個功能。

到此時,我才意識到需要一種方法來控件JS的緩存問題,否則,后續(xù)任何涉及JS文件內(nèi)容的修改,都會因為緩存無法獲取最新JS文件,而導致生產(chǎn)事故。

原則上,我們是需要在有JS更新的時候,才會去重新加載JS文件,而不是每次都重新加載,因此第一種做法給JS應用地址后添加隨機參數(shù)是不可取的,因為它意味著,幾乎每次加載頁面都會是重新加載JS,而不會合理的利用緩存JS。但是,我們還有第二種更合理的做法,如果關(guān)注過一些國外網(wǎng)站代碼,會發(fā)現(xiàn),他們通常是在js鏈接后添加一個版本號參數(shù),而不是隨機數(shù),當js代碼發(fā)生修改時,只需要將版本號加1,就可以很巧妙的解決通知客戶端更新js文件。不知道,誰是第一個想到這種方法的人,不過毫無疑問,他是值得我們欽佩的,真是一個不錯的idea的!

附贈些許代碼:
<script src="../JavaScript/SelectOpenWindow.js?v=1" type="text/javascript"></script>

相關(guān)文章

  • ECMAScript6入門教程

    ECMAScript6入門教程

    本文詳細講解了ECMAScript6的基礎(chǔ)教程,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • Javascript基礎(chǔ)知識詳解

    Javascript基礎(chǔ)知識詳解

    本篇適合javascript新手或者學了前端一段時間,對js概念不清晰的同學。本文將講述幾點對于初學者遇到的javascript的坑,相信對javascript基礎(chǔ)薄弱的同學,可以加深對javascript的理解
    2021-10-10
  • 深入理解JS異步編程-Promise

    深入理解JS異步編程-Promise

    Promise 是 ES6 新增的一個異步解決方案,它同 await 一樣,是異步的解決方案,但是相比于 await,Promise 可以同時統(tǒng)一處理多個異步操作。這一點是很方便的。下面我們來一起學習一下吧
    2019-06-06
  • JavaScript函數(shù)模式詳解

    JavaScript函數(shù)模式詳解

    文章對javascript的四種函數(shù)模式進行了詳細的解釋,并附上示例,方便小伙伴們理解并應用,希望對大家能有所幫助。
    2014-11-11
  • 淺談JavaScript函數(shù)的四種存在形態(tài)

    淺談JavaScript函數(shù)的四種存在形態(tài)

    下面小編就為大家?guī)硪黄獪\談JavaScript函數(shù)的四種存在形態(tài)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06
  • Javascript實現(xiàn)的SHA-256加密算法完整實例

    Javascript實現(xiàn)的SHA-256加密算法完整實例

    這篇文章主要介紹了Javascript實現(xiàn)的SHA-256加密算法,以完整實例形式分析了JavaScript實現(xiàn)SHA-256加密的具體步驟與相關(guān)技巧,需要的朋友可以參考下
    2016-02-02
  • JavaScript的繼承的封裝介紹

    JavaScript的繼承的封裝介紹

    繼承的封裝貌似在每個語言中都有,在本文為大家詳細介紹下,JavaScript的繼承的封裝,感興趣的朋友不要錯過
    2013-10-10
  • javascript SpiderMonkey中的函數(shù)序列化如何進行

    javascript SpiderMonkey中的函數(shù)序列化如何進行

    JavaScript中如何進行函數(shù)序列化,函數(shù)序列化的作用是什么?本文將介紹SpiderMonkey中的函數(shù)序列化,有需要的朋友可以參考下
    2012-12-12
  • JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

    JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

    this表示當前對象,如果在全局作用范圍內(nèi)使用this,則指代當前頁面對象window,prototype本質(zhì)上還是一個JavaScript對象,constructor始終指向創(chuàng)建當前對象的構(gòu)造函數(shù)
    2013-05-05
  • 解讀document.querySelector()方法

    解讀document.querySelector()方法

    這篇文章主要介紹了document.querySelector()方法的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03

最新評論