网站js动态版本管理

最新推荐文章于 2023-06-13 10:00:45 发布

qq_26264237

最新推荐文章于 2023-06-13 10:00:45 发布

阅读量508

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_26264237/article/details/103732419

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

网站js动态版本管理

js动态加版本号
用法
jsloader.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]);
}

qq_26264237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
网站js动态版本管理

网站js动态版本管理js动态加版本号用法jsloader.jsjs动态加版本号1、每次刷新网页，js统计距离上次检查版本的时间戳，大于时间戳，查询网站版本2、js资源加版本号查询版本按顺序加载js用法<!DOCTYPE html><html><head> <title></title> <met...
复制链接

扫一扫