动态加载jscss 代码

Posted 2020-07-13 douglasvegas

一、原生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.onload=_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);