js插件动态加载js、css解决方案

　　最近因为工作需要做了一个js自动导入的插件，一开始很天真的以为动态创建个script添加到head中就ok了，试了之后才发现了问题，就是如果同时引入了多个js文件，而且后一个文件中用到了前一个文件中的变量，那就会报错，靠~~悲催了，就是说js如果动态加载（非浏览器加载因为浏览器加载时同步加载的会等待前一个js加载完成后才进行下一个js加载，这样就不会出现问题）那加载的文件是异步进行的，难怪啊！然后在网上找了些资料说用ajax同步加载，然后我试了真可以，下面就是我的代码分享出来给大家，但是注意这样加载出来的js有一个致命的弱点，就是没法再浏览器上调试- - ！！！！！以后再寻找解决方案吧,先贴代码：

js主文件importComJs.js:

**
 * Created by carlos on 2015/5/19.
 * QImport 导入帮助函数，可以很方便的导入指定的js、css文件。但是需要注意的是，这样导入的js将无法调试，暂时没有找到解决方案--！
 * 使用方法先把此文件引入，必须放在head中的最前面导入，
 * <script src="../js/importComJs.js" id="QImport"></script>
 * id必须是QImport,否则无效
 * 然后加入
 * <script>
 * 	 	QImport.init(customscripts);
 * </script>
 * customscripts参数为：外加的引入文件配置，可以不填。但填写必须遵守QImport.IMPORTSCRIPTS的写法。
 * 如果不想手动初始化引入函数，可以这样写：
 * <script src="../js/importComJs.js" id="QImport" data-auto="true"></script>
 * 这里的 data-auto为true时候才会自动初始化，否则需要手动初始化。
 * 使用上自动初始化，不用担心引入顺序问题，后面的其他js、css文件按正常引用就可以了。
 * 注意：importComjs文件必须第一个引入，否则将出现引用找不到的问题。
 * 新增属性：
 * 		data-config:自定义配置文件名，默认为“importConfig.json”
 * 		data-personalconfigname：自定义个性化配置名称，在配置文件中的“personalscripts”中配置
 * 		注意：配置加载顺序是：importscripts最高、personalscripts其次、customscripts最低。如果引入的次序不对会引起空指针报错哦^^!
 */

/**
 * 同步加载js脚本
 * @param id   需要设置的<script>标签的id
 * @param url   js文件的相对路径或绝对路径
 * @return {Boolean}   返回是否加载成功，true代表成功，false代表失败
 */
(function(){
	QImport = {
		self:{
			obj:function(){
				return document.getElementById('QImport');      //获取script的id，如果项目中实在是有冲突不得不改，那就该这个“QImport”吧！
			},
			auto:function(){
				return eval(this.getAttr('data-auto'));   		//是否开启自动初始化模式，默认为false
			},
			config:function(){
				return this.getAttr('data-config');       		//自定义配置文件名，默认为“importConfig.json”
			},
			personal:function(){
				return this.getAttr('data-personalconfigname')  //自定义个性化配置名称，在配置文件中的“personalscripts”中配置。
			},
			src:function(){
				return this.getAttr('src');                     //此文件位置，不多说
			},
			getAttr:function(attrName){
				var attrValue = undefined;
				try{
					attrValue = this.obj().getAttribute(attrName);
				}
				catch(e){}
				return attrValue;
			},
			relationpath:function(){
				var src = this.src();
				var re = /^[..\/]*/;
				return src.match(re)[0];
			},
			path:function(filename){
				var src = this.src();
				var temp = src.split('/');
				var path = "";
				temp.pop();
				temp.push(filename);
				return temp.join('/');
			}
		},
		autoinit:function(){
			if(this.self.auto()){
				this.init();
			}
		},
		getpath:function(p){
			var path = this.self.relationpath()+p;
			return path.replace('//','/');
		},
		init:function(customscripts){						//导入文件的主方法
			this.extend(customscripts);
			var IMPORTSCRIPTS = this.IMPORTSCRIPTS;
			var head = document.getElementsByTagName("head").item(0);
			var meta = document.createElement('meta');  //自动添加web手机适应代码；
			meta.name = 'viewport';
			meta.content = 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no';
			head.insertBefore(meta, head.childNodes[0]);
			var re = /^http[s]?:\/\//i;
			for(var i=0;i<IMPORTSCRIPTS.length;i++){
				loadpath = IMPORTSCRIPTS[i].url;
				if(!re.test(IMPORTSCRIPTS[i].url)){
					loadpath = this.getpath(IMPORTSCRIPTS[i].url);
				}
				if(IMPORTSCRIPTS[i].type=="script"){
					var flag = this.loadJS(loadpath,loadpath,i+1)
					if(!flag){
						alert('loading path:"'+loadpath+'" failed,May be lost "http(s)://"');
					}
				}
				else if(IMPORTSCRIPTS[i].type=="css"){
					var csss = document.createElement('link')
					csss.href = this.getpath(IMPORTSCRIPTS[i].url);
					csss.rel = 'stylesheet';
					head.insertBefore(csss, head.childNodes[i+1]);
				}
			}
		},
		extend:function(customscripts){                              //自定义扩展方法，仅适用当前对象
			if(!(customscripts instanceof Array)) return;
			var IMPORTSCRIPTS = this.IMPORTSCRIPTS;
			for(var i=0;i<customscripts.length;i++){
				var flag = false;
				for(var j=0;j<IMPORTSCRIPTS.length;j++){
					if((IMPORTSCRIPTS[j].type==customscripts[i].type)&&(IMPORTSCRIPTS[j].url==customscripts[i].url)){
						flag = true;
						break;
					}
				}
				if(!flag){
					this.IMPORTSCRIPTS.push({type:customscripts[i].type,url:customscripts[i].url});
				}
			}
		},
		ajax:function(url){                                     //ajax原始方法，这里仅可以同步请求
			var  xmlHttp = null;
		    if(window.ActiveXObject)//IE
		    {
		        try {
		            //IE6以及以后版本中可以使用
		            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		        }
		        catch (e) {
		            //IE5.5以及以后版本可以使用
		            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		        }
		    }
		    else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
		    {
		        xmlHttp = new XMLHttpRequest();
		    }
		    //采用同步加载
		    xmlHttp.open("GET",url,false);
		    //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
		    xmlHttp.send(null);
		    //4代表数据发送完毕
		    if ( xmlHttp.readyState == 4 ){
		        //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
		        if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){
		            return xmlHttp.responseText;
		        }
		        else{
		            return false;
		        }
		    }
		    else{
		        return false;
		    }
		},
		loadJS:function(id,url,rank){								//加载js文件
		    var importText = this.ajax(url);
		    if(!importText) return false;
		    var myHead = document.getElementsByTagName("HEAD").item(0);
		    var myScript = document.createElement( "script" );
		    myScript.language = "javascript";
		    myScript.type = "text/javascript";
		    myScript.id = id;
		    try{
		        //IE8以及以下不支持这种方式，需要通过text属性来设置
		        myScript.appendChild(document.createTextNode(importText));
		    }
		    catch (ex){
		        myScript.text = importText;
		    }
		    myHead.insertBefore(myScript, myHead.childNodes[rank]);
		    return true;
		},
		template:{								//加载模板文件，现在仅在引入“jquery”的情况下可用。
			parent:this,						//父类this引用
			_setparent:function(){				//把父类的this赋给子方法的parent
				this.template.parent = this;
			},
			includeTagName:'include',           //引入时候用的标签：<include url="head.html"></include>
			init:function(){
				this.include();
			},
			include:function(){
				var includes = document.getElementsByTagName(this.includeTagName);
				for(var i=0;i<includes.length;i++){
					var url = includes[i].getAttribute('url');
					var includeHtml = this.parent.ajax(url);
					var parent = includes[i].parentNode;
					var newEs = this.parseDom(includeHtml);
					for(var j=0;j<newEs.length;j++){
						parent.insertBefore(newEs[j], includes[i])
					}
				}
				while(true){
					if(includes.length==0) break;
					includes[0].remove();
				}
			},
			parseDom:function(str){
				var obj = document.createElement('div');
				obj.innerHTML = str;
				return obj.childNodes;
			}
		},
		initparent:function(){              	//子类中想用父类中的方法必须通过此方法初始化以下，还必须引入如template的parent和_setparent
			this.template._setparent.call(this);
		},
		getimportjson:function(){				//获取的配置json
			var configName = this.self.config();            //共用配置
			if(configName) this.configname = configName;
			var configpath = this.self.path(this.configname);
			var confJsonStr = this.ajax(configpath);
			if(!confJsonStr){
				alert('config file path:"'+configpath+'" can not be loaded');
				return;
			}
			this.confJson = eval('('+confJsonStr+')');
			importarr = this.confJson.importscripts;
			if(importarr instanceof Array){
				this.IMPORTSCRIPTS = this.confJson.importscripts;
			}
			this.getpersonalarr();
		},
		getpersonalarr:function(){    			//获取个性化配置arr
			var personalConfigName = this.self.personal();
			if(!personalConfigName) return;
			this.personalconfigname = personalConfigName;
			var personalarr = this.confJson.personalscripts[personalConfigName];
			if(personalarr instanceof Array){
				this.extend(personalarr)
			}
		},
		confJson:{},
		IMPORTSCRIPTS:[],
		configname:'importConfig.json'
	}
	QImport.getimportjson();
	QImport.autoinit();
	QImport.initparent();
	try{
		$(function(){
			QImport.template.init();
		});
	}
	catch(e){}

})();

下面是配置文件，importConfig.json：

{
	importscripts:[
		{
			type: 'script',
			url: 'js/jquery-1.9.1/jquery-1.9.1.min.js'
		},{
			type: 'script',
			url: 'js/mui.min.js'
		},{
			type: 'css',
			url: 'css/mui.min.css'
		},{
			type: 'script',
			url: 'js/json2.js'
		}
	],
	personalscripts:{
		test:[
			{
				type:'script',
				url:'js/test.js'
			}
		]
	}
}

注意配置文件必须和导入方法js在同一个路径底下。

以上就是我个人封装的引入js、css的代码，希望和大家交流下，有什么问题希望大家能不吝指教！