動態(tài)加載js/css的簡單實現(xiàn)代碼

    下面小編就為大家?guī)硪黄獎討B(tài)加載js、css的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。
    一、原生js：
    /**
         * 加載js和css文件
         * @param     jsonData.path        前綴路徑
         * @param     jsonData.url        需要加載的js路徑或css路徑
         * @param     jsonData.type        需要加載的類型 js或css
        */
         function loadWriteFiles(jsonData)
         {
           jsonData.path = jsonData.path != undefined ? jsonData.path : "";
           if(jsonData.type == "js")
           {
            document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
           }
           else if(jsonData.type == "css")
           {
            document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
           }
         }
         /**
         * 加載js或css到head中
         * @param     jsonData.path        前綴路徑
         * @param     jsonData.url        需要加載的js路徑或css路徑
         * @param     jsonData.type        需要加載的類型 js或css
         */
         function loadFilesToHead(jsonData)
         {
           jsonData.path = jsonData.path != undefined ? jsonData.path : "";
           if(jsonData.type == "js")
           {
             var _js = document.createElement("script");
             _js.setAttribute("type", "text/javascript");
             _js.setAttribute("src", jsonData.path + jsonData.url);
             _js.onload = _js.onreadystatechange=function(){ 
               if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
                 if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
                    jsonData["callback"].call(this);
                 }
               } 
               _js.onload=_js.onreadystatechange=null; 
             } 
             document.getElementsByTagName("head")[0].appendChild(_js);//追加到head標簽內(nèi)
           }
           else if(jsonData.type == "css")
           {
             var _css = document.createElement("link");
             _js.setAttribute("type", "text/css");
             _css.setAttribute("rel", "stylesheet");
             _css.setAttribute("href", jsonData.path + jsonData.url);
             document.getElementsByTagName("head")[0].appendChild(_css);//追加到head標簽內(nèi)
           }
         }
    二、jquery版本：
    采用deferred對象返回結(jié)果
    var uiLoad = uiLoad || {};
    (function($, $document, uiLoad) {
      "use strict";
      var loaded = [],
      promise = false,
      deferred = $.Deferred();
      uiLoad.load = function (srcs) {
        srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
        if(!promise){
          promise = deferred.promise();
        }
       $.each(srcs, function(index, src) {
        promise = promise.then( function(){
          return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src);
        } );
       });
       deferred.resolve();
       return promise;
      };
      var loadScript = function (src) {
        if(loaded[src]) return loaded[src].promise();
        var deferred = $.Deferred();
        var script = $document.createElement('script');
        script.src = src;
        script.onload = function (e) {
          deferred.resolve(e);
        };
        script.onerror = function (e) {
          deferred.reject(e);
        };
        $document.body.appendChild(script);
        loaded[src] = deferred;
        return deferred.promise();
      };
      var loadCSS = function (href) {
        if(loaded[href]) return loaded[href].promise();
        var deferred = $.Deferred();
        var style = $document.createElement('link');
        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = href;
        style.onload = function (e) {
          deferred.resolve(e);
        };
        style.onerror = function (e) {
          deferred.reject(e);
        };
        $document.head.appendChild(style);
        loaded[href] = deferred;
        return deferred.promise();
      }
    })(jQuery, document, uiLoad);
    以上這篇動態(tài)加載js、css的簡單實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考