给外联样式表和JavaScript脚本增加版本号的方法

方法和问题

• 方法一：前端使用JQuery的方法增加版本号
• 方法二：前端使用 JavaScript 来增加版本号
• 方法三：后端代码加载

方法一：前端使用JQuery的方法增加版本号
先上代码

<script src="@Url.Content("~/Content/Web/js/jquery2.1.4.min.js")" type="text/javascript"></script>
<script>
    //更新public.css
    var dateNow = new Date();
    var projectVersion = dateNow.getFullYear() + "" + dateNow.getMonth() + 1 + "" + dateNow.getDate(); //更新public.css
    $("head link[href='/Content/Web/css/bootstrap.min.css']").after("<link href='/Content/Web/css/public.css?v=" + projectVersion + "' rel='stylesheet' type='text/css'>");
</script>

方法二：前端使用 JavaScript 来增加版本号

<script type="text/javascript">
    var dateNow = new Date();
    var projectVersion = dateNow.getFullYear() + "" + dateNow.getMonth() + 1 + "" + dateNow.getDate(); //更新public.css
    var headSelect = document.querySelector("head");
    var node = document.createElement("link");
    node.setAttribute("href", "/Content/Web/css/public.css?v=" + projectVersion);
    node.setAttribute("rel", "stylesheet");
    node.setAttribute("type", "text/css");
    headSelect.appendChild(node);
</script>

可以使用JQuery 为什么要使用 JavaScript？
因为 JavaScript 运行速度会比 JQuery 快那么一点点，而且不用先引入 JQuery库

方法三：后端代码加载
这里我用的是 C# 和 Razor

@{
    var version = DateTime.Now.ToShortDateString().Replace("/","");
}
<link href="@Url.Content("~/Content/Web/css/public.css")?v=@version" rel="stylesheet" type="text/css" />

前面两个方法加载外联样式表文件，页面多少会出现样式渲染跟不上的情况。但用第三种方法会好很多