如何通过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>