前端静态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)

 

　　然后看结果：

　　

　　完美收工，记下来，以后用，若有错欢迎来打脸。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　字太难看，不想动笔，此章为印，加深记忆，往后若遇，来此考古。