最近开发webview嵌套开发，遇到资源重载的问题，具体表现在：css缓存强硬，js缓存强硬，无法事实更新静态资源，但若是禁止页面使用缓存策略的话，对服务器的占用比就会提高，访问少的时候，还好，访问量几何上升时，服务器就GG了。
经过多方查找发现除去glup，webpack，node，以及服务器做资源版本之外，并没有一个简单省事的方法，但项目时单纯的html页面，并没有什么框架使用，如若使用打包方式增加版本号更新缓存的话，相比较会麻烦一些，所以自己扣置了个小玩意。
由于script标签更新src之后并不会资源重载，所以使用了标签重新插入，link标签在更新href之后，资源会重新进行加载，所以直接替换路径
废话不多说，直接上代码：
function EditionFn (edition){
if(edition.notUrl){
edition.notUrl = edition.notUrl.split(",")
}else{
edition.notUrl = ["///"]
}
edition.notHtml = edition.notHtml || "///";
edition.isHtml = edition.isHtml || location.pathname;
if(location.pathname.indexOf(edition.notHtml) > -1 && location.pathname.indexOf(edition.isHtml) < 0){
return false
}
var cookie = document.cookie
cookie = cookie.split(";")
cookie.forEach(function(item){
item = item.replace(/\s*/g, "")
var thistime = item.split("=");
cookie[thistime[0]]= thistime[1]
})
function loadJS(script){
var src = script;
var script_dom = document.createElement('script');
script_dom.src = src;
script_dom.language = 'javascript';
script_dom.type = 'text/javascript';
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script_dom);
}
var scrUrl = [];
$('script').each(function(){
if($(this).attr("charset") == "utf-8" && $(this).attr("src") && cookie.edition && cookie.edition != edition.edition){
var src = $(this).attr("src")+ '?v=' + edition.edition;
scrUrl.push(src)
$(this).attr("src","");
}
})
if(scrUrl.length > 0){
scrUrl.forEach(function(item){
var thisType = true;
edition.notUrl.forEach(function(items){
if(item.indexOf(items) > -1){
thisType = false;
}
})
if(thisType){
loadJS(item)
}
})
}
$('link').each(function(){
if($(this).attr("type") == "text/css" && $(this).attr("href") && cookie.edition && cookie.edition != edition.edition){
var src = $(this).attr("href")+ '?v=' + edition.edition;
var thisType = true;
edition.notUrl.forEach(function(items){
if(src.indexOf(items) > -1){
thisType = false;
}
})
if(thisType){
$(this).attr("href",src)
}
}
})
var times = new Date().getTime() + 7*24*60*60*1000;
if(cookie.edition && cookie.edition != edition.edition){
document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";" ;
}else{
document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";";
}
}
调用如下：
EditionFn({
edition:edition,
notUrl:"base64.js",
notHtml: '///',
isHtml: "cssAndjsSession"
})
代表参数如下：
edition: 版本号
notUrl：不重载更新资源，默认为空
notHtml：不重载更新路径，默认为空
isHtml：重载更新指定页面（目前只能指定单个页面，要想多个页面自己去改代码吧），默认所有页面都会更新
第一次请求时，不会资源重载，只有版本号不符时，会进行资源重载
欢迎各位指教一二
网友评论