如何通過JavaScript文件將所有JavaScript文件包含在目錄中？

Question

我有一堆的，我想在頁面中包含JavaScript文件，但我不希望有繼續寫作

<script type="text/javascript" src="js/file.js"></script> 

那麼，有沒有一種方法，包括目錄中的所有文件（未知大小）？我可以做類似...

$.getScript("js/*.js"); 

...要獲取「js」目錄中的所有JavaScript文件嗎？我如何使用jQuery來做到這一點？

Answer 1

一般來說，這可能不是一個好主意，因爲你的html文件應該只加載他們實際使用的JS文件。無論如何，這對於任何服務器端腳本語言來說都是微不足道的。只需在將頁面提供給客戶端之前插入腳本標籤即可。

如果你想在不使用服務器端腳本的情況下做到這一點，你可以將你的JS文件放到允許列出目錄內容的目錄中，然後使用XMLHttpRequest讀取目錄的內容，並解析出文件名稱並加載它們。

選項＃3是使用getScript（）加載所有其他文件的「加載程序」JS文件。把它放在所有html文件的腳本標籤中，然後只要上傳一個新腳本就需要更新加載器文件。

Answer 2

如何使用服務器端腳本來生成腳本標記行？粗略地，這樣的事情（PHP） -

$handle=opendir("scripts/"); 

while (($file = readdir($handle))!==false) { 
echo '<script type="text/javascript" src="$file"></script>'; 
} 

closedir($handle); 

Answer 3

你不能做到這一點在JavaScript中，因爲JS在瀏覽器執行，而不是在服務器上，所以它不知道什麼目錄或其他服務器資源。

最好的選擇是使用像jellyfishtree發佈的服務器端腳本。

Answer 4

既然你想100％的客戶端解決方案，從理論上講，你很可能做到這一點：

通過XMLHttpRequest，得到目錄列表頁面，該目錄（大多數Web服務器返回文件的列表，如果有目錄中沒有index.html文件）。

用javascript解析該文件，將所有.js文件拉出。這當然會對您的Web服務器/ Web主機上的目錄列表的格式敏感。如果你創建一個PHP文件，其中包括所有的JS從目錄中的文件，然後只包括這個PHP

function loadScript (dir, file) { 
var scr = document.createElement("script"); 
scr.src = dir + file; 
document.body.appendChild(scr); 
} 

Answer 5

@jellyfishtree這將是一個更好的：

添加腳本動態標籤，像這樣的東西文件通過腳本標記。這具有更好的性能，因爲瀏覽器必須對服務器執行更少的請求。看到這一點：

javascripts.php：

<?php 
    //sets the content type to javascript 
    header('Content-type: text/javascript'); 

    // includes all js files of the directory 
    foreach(glob("packages/*.js") as $file) { 
     readfile($file); 
    } 
?> 

指數。php：

<script type="text/javascript" src="javascripts.php"></script> 

就是這樣！
玩得開心！ :)

Answer 6

它可以完全客戶端，但所有的JavaScript文件名稱必須指定。 例如，作爲數組項：

function loadScripts(){ 
    var directory = 'script/'; 
    var extension = '.js'; 
    var files = ['model', 'view', 'controller']; 
    for (var file of files){ 
     var path = directory + file + extension; 
     var script = document.createElement("script"); 
     script.src = path; 
     document.body.appendChild(script); 
    } 
} 

Answer 7

你不能這樣做，在Javascript從瀏覽器...如果我是你，我會使用類似browserify。使用commonjs模塊編寫代碼，然後將JavaScript文件編譯爲一個。

在你的html加載你編譯的JavaScript文件。

Answer 8

你可以使用類似Grunt Include Source的東西。它給你一個很好的語法來預處理你的HTML，然後包含你想要的任何東西。這也意味着，如果您正確設置了構建任務，則可以將所有這些包括在開發模式中，但不包括prod模式，這非常酷。

如果您沒有爲您的項目使用Grunt，可能有類似的Gulp工具或其他任務運行工具。

Answer 9

我正在尋找這個問題的答案，並有我自己的問題。我在不同的地方找到了一些解決方案，並將它們放在我自己喜歡的答案中。

function exploreFolder(folderURL,options){ 
/* options:     type   explaination 

    **REQUIRED** callback: FUNCTION  function to be called on each file. passed the complete filepath 
    then:     FUNCTION  function to be called after loading all files in folder. passed the number of files loaded 
    recursive:    BOOLEAN   specifies wether or not to travel deep into folders 
    ignore:     REGEX   file names matching this regular expression will not be operated on 
    accept:     REGEX   if this is present it overrides the `ignore` and only accepts files matching the regex 
*/ 
$.ajax({ 
    url: folderURL, 
    success: function(data){ 
     var filesLoaded = 0, 
     fileName = ''; 

     $(data).find("td > a").each(function(){ 
      fileName = $(this).attr("href"); 

      if(fileName === '/') 
       return; //to account for the (go up a level) link 

      if(/\/\//.test(folderURL + fileName)) 
       return; //if the url has two consecutive slashes '//' 

      if(options.accept){ 
       if(!options.accept.test(fileName)) 
        //if accept is present and the href fails, dont callback 
        return; 
      }else if(options.ignore) 
       if(options.ignore.test(fileName)) 
        //if ignore is present and the href passes, dont callback 
        return; 

      if(fileName.length > 1 && fileName.substr(fileName.length-1) === "/") 
       if(options.recursive) 
        //only recurse if we are told to 
        exploreFolder(folderURL + fileName, options); 
       else 
        return; 

      filesLoaded++; 
      options.callback(folderURL + fileName); 
      //pass the full URL into the callback function 
     }); 
     if(options.then && filesLoaded > 0) options.then(filesLoaded); 
    } 
}); 
} 

然後，你可以這樣調用：

var loadingConfig = { 
    callback: function(file) { console.log("Loaded file: " + file); }, 
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); }, 
    recursive: true, 
    ignore: /^NOLOAD/, 
}; 
exploreFolder('/someFolderURL/', loadingConfig); 

這個例子將調用回調函數上的每個文件/文件夾中的指定文件夾除了對於那些與NOLOAD開始。如果你想實際加載文件到頁面中，那麼你可以使用我開發的這個輔助函數。

function getFileExtension(fname){ 
    if(fname) 
     return fname.substr((~-fname.lastIndexOf(".") >>> 0) + 2); 
    console.warn("No file name provided"); 
} 
var loadFile = (function(filename){ 
    var img = new Image(); 

    return function(){ 
     var fileref, 
      filename = arguments[0], 
      filetype = getFileExtension(filename).toLowerCase(); 

     switch (filetype) { 
      case '': 
       return; 
      case 'js': 
       fileref=document.createElement('script'); 
       fileref.setAttribute("type","text/javascript"); 
       fileref.setAttribute("src", filename); 
       break; 
      case "css": 
       fileref=document.createElement("link"); 
       fileref.setAttribute("rel", "stylesheet"); 
       fileref.setAttribute("type", "text/css"); 
       fileref.setAttribute("href", filename); 
       break; 
      case "jpg": 
      case "jpeg": 
      case 'png': 
      case 'gif': 
       img.src = filename; 
       break; 
      default: 
       console.warn("This file type is not supported: "+filetype); 
       return; 
     } 
     if (typeof fileref !== undefined){ 
      $("head").append(fileref); 
      console.log('Loaded file: ' + filename); 
     } 
    } 
})(); 

該函數接受JS | CSS | （通用圖像）文件並加載它。它也會執行JS文件。 需要完整的調用來在你的腳本運行加載所有圖片和*樣式等腳本可能看起來像這樣：

loadingConfig = { 
    callback: loadfile, 
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); }, 
    recursive: true, 
    ignore: /^NOLOAD/, 
}; 
exploreFolder('/someFolderURL/', loadingConfig); 

它工作得！

Answer 10

，這是非常短的另一種選擇：

<script type="text/javascript"> 
$.ajax({ 
    url: "/js/partials", 
    success: function(data){ 
    $(data).find('a:contains(.js)').each(function(){ 
     // will loop through 
     var partial= $(this).attr("href"); 
     $.getScript("/js/partials/" + partial, function(data, textStatus, jqxhr) {}); 
    }); 
    } 
}); 
</script>