前端靜態js、css文件自動增加版本號方法

首先為什么要加這個版本號呢？

　　因為瀏覽器會的緩存機制會緩存你的js與css代碼，當然，這本是瀏覽器本意為了減少加載時間優化用戶體驗，但是也因為緩存機制的存在，在頁面刷新的時候瀏覽器會去拿存在瀏覽器緩存內部的js和css代碼，這就可能造成我們開發人員在更新代碼的時候，會被瀏覽器的緩存機制給坑一把，不能展示最新的樣式或者行為事件，為了使每一次頁面重新加載的都是我們最新版的代碼，所以就想到用版本號來區分每一次加載：

　　

    <!-- 所有主流瀏覽器都支持 data-* 屬性。定義和用法 data-* 屬性用於存儲頁面或應用程序的私有自定義數據 -->
    <!-- 先在所有的script或style內部加上data-屬性 -->
    <script data-src="scroll.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var scr = document.getElementsByTagName("script");
        for (var i = 0; i < scr.length; i++) {
            // getAttribute("data-*")方法獲取元素data-*的內容后跟版本號即可
            // 最常見的版本號就是時間戳了,當然想用什么應該都是可以的
            scr[i].src = scr[i].getAttribute("data-src") + "?t=" + new Date().getTime()
        }
    </script>

　　

　　scroll.js內部代碼：

　　

// 湊湊字數,看起來不那么L
var a, b, c, d;

a = 10;
b = 5;
c = 2;
d = 1;
console.log(a + b + c + d)
console.log(123456789)

 

　　然后看結果：

　　

　　完美收工，記下來，以后用，若有錯歡迎來打臉。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　字太難看，不想動筆，此章為印，加深記憶，往后若遇，來此考古。