带你撸出一手好代码
一种JavaScript动态加载的资源版本号更新的解决方案

通常我们会通过服务器端配置版本号的方式刷新前端资源,防止浏览器在缓存中读取过期脚本、CSS、图片等资源


<script type="text/javascript" src="js/common.js?v=<?php echo RESOURCE_VERSION ?>"></script>

 

具体做法是在资源文件地址后面追加一个版本号字符串

 

但是假如被加载的资源的地址并非被硬编码在html文件中,而是通过JS脚本动态加载,并且执行加载的代码也不是内嵌在html页面上,而是在独立的JS文件中,因为服务器端代码无法嵌入到JS文件,所以在版本号这招就失效了。 比如这样

 

var logoUrl = "/images/logo.png"
var logoImg = new Image();
logoImg.src = logoUrl;

 

为了解决这个在项目中存在的难题,我找到了一个丑陋却有效的方法:通过JS代码分析嵌入在html页面中的Script标记,获得标记Src属性的脚本地址,提取地址后面的版本号。

 

如此,在JS文件中可以间接的拿到服务器端配置的版本号


<script type="text/javascript" src="js/common.js?v=201802071"></script>


标红的版本号可以通过JS代码动态获取

 

   function   getClientResourceVersion(scriptFileName) {
            var findVersionNum = function (src) {
                var reg = new RegExp(scriptFileName + "\\?v=(\\d+$)", "i");
                if (!reg.test(src)) {
                    return "";
                } else {
                    return reg.exec(src)[1];
                }
            };
            var scripts = document.scripts;
            for (var i = 0; i < scripts.length; i++) {
                var script = scripts[i];
                var src = script.src;
                var versionNum = findVersionNum(src);
                if (versionNum != "") {
                    return versionNum;
                }
            }
            return "";        
}

 

getClientResourceVersion函数有一个唯一的参数,传递我们所需要提取版本号脚本URL的文件名称


<script type="text/javascript" src="js/common.js?v=201802071"></script>

 

如要提取此标签所引用的脚本地址后面的版本号,则如此调用即可


var versionNum = getClientResourceVersion("common.js")
var logoUrl = "/images/logo.png?v=" + versionNum;
var logoImg = new Image();
logoImg.src = logoUrl;

 


作者:陈大侠
日期:2018-02-07

留言(0条)

我要发表留言

您的大名 选填
电子邮箱 选填

欢迎关注微信公众号 「带你撸出一手好代码」

首页    GitHub 知乎 豆瓣 博客园