网站js动态版本管理

网站js动态版本管理

  • js动态加版本号
  • 用法
  • jsloader.js

js动态加版本号

1、每次刷新网页,js统计距离上次检查版本的时间戳,大于时间戳,查询网站版本
2、js资源加版本号

查询版本
网站js动态版本管理_第1张图片
按顺序加载js
在这里插入图片描述

用法


<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]);
}

你可能感兴趣的:(js)