关于动态加载js

已知一个需要动态加载的js的文件路径数组，动态加载数组里面所有的js文件。

加载分两种情况：

1. 并行加载，不管js的执行顺序。

2. 串行加载，即一个一个加载，上一个加载完再加载下一个，直到最后。

动态加载js一般都是动态创建一个script，

解决第一种情况：

function loadExternalFile(src,parentElement,tagName){
var elem = document.createElement(tagName);
if(tagName==='link'){
elem.setAttribute('href',src);
elem.setAttribute('rel','stylesheet');
}else if(tagName==='script'){
elem.setAttribute('src',src);
elem.setAttribute('type','text/javascript');
}
parentElement.appendChild(elem);
}

解决第二种情况：

function loadScript(url, parentEle, tagName, callback){

var ele = document.createElement(tagName);
var typeProp = tagName==='script'?'type':'rel';
ele[typeProp] = tagName==='script'?'text/javascript':'stylesheet';

if (ele.readyState){  //IE
ele.onreadystatechange = function(){
if (ele.readyState == "loaded" ||
ele.readyState == "complete"){
ele.onreadystatechange = null;
callback();
}
};
} else {  //Others
ele.onload = function(){
callback();
};
}

typeProp = tagName==='script'?'src':'href';
ele[typeProp] = url;
parentEle.appendChild(ele);
}

第一种情况用法非常简单就不说了。

第二种用法其实也不难：

假设：scripts数组：['a.js','b.js','c.js']

var i=0;
var n=scripts.length;
loadScript(scripts[i],parentEle,'script',loadScriptComplete);

function loadScriptComplete(){
i++;
if(i<n){
loadScript(scripts[i],parentEle,'script',loadScriptComplete);
}
}

上面的两种方法其实也适用于加载css文件。