网站js动态版本管理

男娘i 2023-06-25 08:17 41阅读 0赞

### 网站js动态版本管理 ###

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

# js动态加版本号 #

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

查询版本  
![在这里插入图片描述][20191227151605189.png]  
按顺序加载js  
![在这里插入图片描述][20191227151842312.png]

# 用法 #

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

[20191227151605189.png]: https://img-blog.csdnimg.cn/20191227151605189.png
[20191227151842312.png]: https://img-blog.csdnimg.cn/20191227151842312.png