项目改版之前用的是velocity(.vm)格式,可以用后台定义的字段设置时间戳,改版后新建前端页面使用静态html开发,为了防止css和js缓存需要添加时间戳,特此记录,本文使用的方法比较笨,缺点也会描述出来,如果有更好的方法,欢迎评论区贴上链接或者代码
html文件代码如下:
<html>
<head>
<!--这里设置的是单独页面会用到的css/js文件-->
<script id="json-script" type="application/json">
[
"a.css",
"b.js"
]
</script>
<script src=include.js></script>
</head>
......
</html>
include.js文件代码如下:
//获取页面的url公共部分,不同项目可能用不上
document.getElementsByTagName('html')[0].style.visibility="hidden";
window.urlroot='/'+window.location.pathname.split('/')[1];、
//这里定义的是公共的css/js文件
let publicUrlArr=[
'default.css',
'jquery.js',
];
let node=document.getElementById("json-script");
let urlArr;
if(node){
let selfUrlArr=JSON.parse(node.innerText);
urlArr=publicArr.concat(selfUrlArr);
}else{
urlArr=publicArr;
}
let t=new Date().getTime();
for(let i=0,len=urlArr.length;i<len;i++){
let thisUrl=urlArr[i];
let el;
if(thisUrl.endsWith(".css")){
el=document.createElement("link");
el.rel="stylesheet";
el.href=thisUrl+"?t="+t;
}else{
el=document.createElement("script");
el.type="text/javascript";
//async设置是为了js顺序加载,比如先加载jquery.js,否则后面用的jquery/$的会报错
el.async=false;
el.src=thisUrl+"?t="+t;
}
document.head.appendChild(el);
}
//下面的方法可优化渲染延迟导致样式短暂不生效的问题
window.onload=function(){
document.getElementsByTagName('html')[0].style.visibility="visible";
}
缺点:
1.如果html有直接引入的js,这个js有使用上述动态引入的js的相关方法时,会报错
2.会比一般的引入方式慢一些
3.上述应用的场景是希望所有css和js文件都添加时间戳,单独动态引入的无须如此麻烦,可只用使用for循环中的代码
4.不能正常打断点,可通过调试器里的事件或者请求接口进行停顿