原生JS如何动态加载JS和CSS文件以及代码脚本

DOM readyState属性共5中状态

1. uninitialized：初始状态

2. loading：document加载中

3. loaded: document加载完成

4. interactive：已加载并可与用户交互，但还需要加载图片等其他资源

5. complete：全部资源加载完成

DOM文档加载顺序：

1. 解析HTML结构

2. 加载外部脚本和样式表文件(loading)

3. 解析并执行脚本

4. DOM树构建完成（readyState：interactive）

5. 加载外部资源文件（图片等）

6. 页面加载完成（readyState：complete）

动态加载公共方法

var DynamciLoadUtil = {
 // 动态加载外部js文件，并执行回调
 loadJS: function(url, callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 if(typeof callback == 'function'){
 script.onload = script.onreadystatechange = function(){
 if(!this.readyState || this.readyState == 'loaded'
 || this.readyState == 'complete'){
 callback();
 script.onload = script.onreadystatechange = null;
 }
 }
 }
 document.body.appendChild(script);
 //document.getElementsByTagName('body')[0].appendChild(script);
 },
 // 行内方式动态加载js代码
 loadJSText: function(jsText){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 try {
 // Firefox,Safari,Chrome,Opera支持
 script.appendChild(document.createTextNode(jsText));
 } catch(ex){
 // IE早期的浏览器，需要使用script的text属性来指定js代码
 script.text = jsText;
 }
 document.body.appendChild(script);
 },
 // 动态加载外部CSS文件
 loadCSS:function(url){
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.url = url;
 document.getElementsByTagName('head')[0].appendChild(link);
 },
 // 使用<style>标签包含嵌入式CSS
 loadCSSText: function(cssText){
 var style = document.createElement('style');
 style.type = 'text/css';
 try{
 // Firefox,Safari,Chrome,Opera支持
 style.appendChild(document.createTextNode(cssText));
 } catch(ex){
 // IE早期浏览器，需要使用style元素的styleSheet属性的cssText属性
 style.styleSheet.cssText = cssText;
 }
 }
}