网站js动态版本管理
js动态加版本号
1、每次刷新网页,js统计距离上次检查版本的时间戳,大于时间戳,查询网站版本
2、js资源加版本号
查询版本
按顺序加载js
用法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- 脚本 -->
<script src="../../../resource/js/jsloader.js"></script>
<script type="text/javascript">
jsloader(["../../../resource/js/jquery.min.js",
"../../../resource/js/template.js",
"../../../resource/lib/layui/layui.js",
"js/xxx.js",
], function () {
console.log('js all complete');
});
</script>
</body>
</html>
jsloader.js
//localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
var refreshTime = 20 * 1000;//刷新版本时间
var versionUrl = "/version.json";//版本信息
function post(url,callback,type) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
// 当状态变化时处理的事情
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 5.接收响应信息
var responseText = xmlHttp.responseText;
var data = responseText;
if("json" == type) {
data = eval('('+data+')');
}
if(callback) {
callback(data);
}
}
}
//第三个参数:是否是异步 true--异步 false--同步
xmlHttp.open("POST", url, false);
xmlHttp.send();
}
function refreshVersion() {
var timestamp = new Date().getTime();
var versionTime = sessionStorage.versionTime;
//debugger;
if (!versionTime || versionTime == null || (timestamp - versionTime) > refreshTime) {
post(versionUrl + "?t=" + timestamp, function(jsonData) {
//console.log(jsonData)
sessionStorage.version = jsonData.version;
sessionStorage.versionTime = timestamp;
},"json")
}
}
function jsloader(arr, cb) {
refreshVersion();
var head = document.getElementsByTagName('head')[0];
var _load_index = 0;
function onScriptLoad(node, e, url) {
var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/
: /^(complete|loaded)$/
if (e.type === 'load'
|| (readyRegExp
.test((e.currentTarget || e.srcElement).readyState))) {
head.removeChild(node);
onCallback();
}
}
function onCallback() {
_load_index++;
if (_load_index == arr.length) {
cb();
} else {
load(arr[_load_index]);
}
}
var isOpera = typeof opera !== 'undefined'
&& opera.toString() === '[object Opera]';
function load(url) {
var node = document.createElement('script');
node.async = true;
node.charset = 'utf-8';
// debugger;
node.src = url + '?v=' + sessionStorage.version;
head.appendChild(node);
if (node.attachEvent
&& !(node.attachEvent.toString && node.attachEvent.toString()
.indexOf('[native code') < 0) && !isOpera) {
node.attachEvent('onreadystatechange', function(e) {
onScriptLoad(node, e, url);
});
} else {
node.addEventListener('load', function(e) {
onScriptLoad(node, e, url);
}, false);
}
}
load(arr[_load_index]);
}