写代码的时候经常会遇到修改了样式文件和脚本文件后但是没有效果的问题,仔细查看页面dom结构的话会发现代码仍然是你修改之前的代码,这就是浏览器历史记录缓存的问题,碰到这种情况就必须强制刷新页面或者清除浏览器本地缓存。
但是这样做是非常麻烦的,有时候要经常做这样的操作难免会感到繁琐。所以想着自己写哥函数来解决这个问题,当然你也可以用一些构建工具比如gulp之类的也是可以的。
解决问题的主要思路就是:获取到页面上的所有link标签和script标签的href属性以及src属性,然后给它们拼接上一个时间戳,代码如下:
changeVersion();
//定义替换css,js文件版本号函数
function changeVersion() {
console.log('==============================');
var link = Array.prototype.slice.call($('link'));
var script = Array.prototype.slice.call($('script'));
var timeStamp = (new Date()).valueOf();
link.forEach((item) => {
var href = $(item).attr('href');
var index = href.indexOf("?");
if(index>-1){
href = href.substring(0,index);
}
$(item).attr('href', href + '?v=' + timeStamp);
});
script.forEach((item) => {
var src = $(item).attr('src');
if(src){
var index = src.indexOf("?");
if(index>-1){
src = src.substring(0,index);
}
$(item).attr('src', src + '?v=' + timeStamp);
}
})
}