一、原生js:
1 /** 2 * 加载js和css文件 3 * @param jsonData.path 前缀路径 4 * @param jsonData.url 需要加载的js路径或css路径 5 * @param jsonData.type 需要加载的类型 js或css 6 */ 7 function loadWriteFiles(jsonData) 8 { 9 jsonData.path = jsonData.path != undefined ? jsonData.path : ""; 10 if(jsonData.type == "js") 11 { 12 document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>"); 13 } 14 else if(jsonData.type == "css") 15 { 16 document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />"); 17 } 18 } 19 20 /** 21 * 加载js或css到head中 22 * @param jsonData.path 前缀路径 23 * @param jsonData.url 需要加载的js路径或css路径 24 * @param jsonData.type 需要加载的类型 js或css 25 */ 26 function loadFilesToHead(jsonData) 27 { 28 jsonData.path = jsonData.path != undefined ? jsonData.path : ""; 29 if(jsonData.type == "js") 30 { 31 var _js = document.createElement("script"); 32 _js.setAttribute("type", "text/javascript"); 33 _js.setAttribute("src", jsonData.path + jsonData.url); 34 _js.onload = _js.onreadystatechange=function(){ 35 if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 36 if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){ 37 jsonData["callback"].call(this); 38 } 39 } 40 _js.οnlοad=_js.onreadystatechange=null; 41 } 42 document.getElementsByTagName("head")[0].appendChild(_js);//追加到head标签内 43 } 44 else if(jsonData.type == "css") 45 { 46 var _css = document.createElement("link"); 47 _js.setAttribute("type", "text/css"); 48 _css.setAttribute("rel", "stylesheet"); 49 _css.setAttribute("href", jsonData.path + jsonData.url); 50 document.getElementsByTagName("head")[0].appendChild(_css);//追加到head标签内 51 } 52 }
二、jquery版本:
采用deferred对象返回结果
1 var uiLoad = uiLoad || {}; 2 3 (function($, $document, uiLoad) { 4 "use strict"; 5 6 var loaded = [], 7 promise = false, 8 deferred = $.Deferred(); 9 10 uiLoad.load = function (srcs) { 11 srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/); 12 if(!promise){ 13 promise = deferred.promise(); 14 } 15 16 $.each(srcs, function(index, src) { 17 promise = promise.then( function(){ 18 return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src); 19 } ); 20 }); 21 deferred.resolve(); 22 return promise; 23 }; 24 25 var loadScript = function (src) { 26 if(loaded[src]) return loaded[src].promise(); 27 28 var deferred = $.Deferred(); 29 var script = $document.createElement('script'); 30 script.src = src; 31 script.onload = function (e) { 32 deferred.resolve(e); 33 }; 34 script.onerror = function (e) { 35 deferred.reject(e); 36 }; 37 $document.body.appendChild(script); 38 loaded[src] = deferred; 39 40 return deferred.promise(); 41 }; 42 43 var loadCSS = function (href) { 44 if(loaded[href]) return loaded[href].promise(); 45 46 var deferred = $.Deferred(); 47 var style = $document.createElement('link'); 48 style.rel = 'stylesheet'; 49 style.type = 'text/css'; 50 style.href = href; 51 style.onload = function (e) { 52 deferred.resolve(e); 53 }; 54 style.onerror = function (e) { 55 deferred.reject(e); 56 }; 57 $document.head.appendChild(style); 58 loaded[href] = deferred; 59 60 return deferred.promise(); 61 } 62 63 })(jQuery, document, uiLoad);