jQuery實現的動態載入css和js檔案程式碼例項 [

在實際應用中，可能需要根據程式碼的執行情況來動態的載入js檔案或者css檔案，下面就通過程式碼例項介紹一下如何使用jquery實現此功能，下面不僅提供能夠實現功能的程式碼，也對程式碼實現的過程進行一下詳細的分析。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$.extend({ 
  includePath: '', 
  include: function(file){ 
    var files = typeof file == "string" ? [file] : file; 
    for (var index = 0; index < files.length; index++){ 
      var name = files[index].replace(/^\s|\s$/g, ""); 
      var att = name.split('.'); 
      var ext = att[att.length - 1].toLowerCase(); 
      var isCSS = ext == "css"; 
      var tag = isCSS ? "link" : "script"; 
      var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' "; 
      var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"; 
      if ($(tag + "[" + link + "]").length == 0){
        $("head").prepend("<" + tag + attr + link + "></" + tag + ">");
      } 
    } 
  } 
}); 
$.include('../js/jquery-ui-1.8.21.custom.min.js'); 
$.include('../css/black-tie/jquery-ui-1.8.21.custom.css');

上面的程式碼實現了動態載入js和css檔案功能，下面對它的實現過程做一下介紹。

一.程式碼註釋:

1.$.extend({})，為jQuery物件本身擴充套件一個物件。

2.includePath: ''，這個是用來規定一些目錄的，當然這裡定義為空，可以根據實際情況自行設定。3.include: function(file){}，此函式實現了動態載入效果，引數是要傳遞的要引用檔案的名稱或者路徑等。

4.var files = typeof file == "string" ? [file] : file，判斷是否是一個字串，如果是個字串就將其轉換成一個陣列，file引數可以是一個陣列，一次性傳遞多個路徑。

5.for (var index = 0; index < files.length; index++)，遍歷陣列中的每一個元素。

6.var name = files[index].replace(/^\s|\s$/g, "")，將字串中的前後空格清除。

7.var att = name.split('.')，用點分隔字串，並生成一個陣列。

8.var ext = att[att.length - 1].toLowerCase()，獲取陣列的最有一個元素，其實就是獲取檔案的字尾名，如css或者js。

9.var isCSS = ext == "css"，判斷ext是否等於"css"，如果是則給isCSS賦值true，否則false。

10.var tag = isCSS ? "link" : "script"，選擇標籤名的成。

11.var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' "，選擇相應標籤的一些屬性。

12.var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"，設定<link>的href屬性值或者<script>的src屬性值。

13.if ($(tag + "[" + link + "]").length == 0){

  $("head").prepend("<" + tag + attr + link + "></" + tag + ">");

} 如果不存在相應的標籤的話，就建立一個，並新增到head中。

二.相關閱讀:

1.replace()函式可以參閱正規表示式replace()函式一章節。

2.split()函式可以參閱javascript split()一章節。

3.toLowerCase()函式可以參閱javascript toLowerCase()一章節。

4.prepend()函式可以參閱jQuery prepend()一章節。