Question

我想在页面中包含一堆JavaScript文件，但我不想继续写

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

那么有没有办法将所有文件都包含在目录中（未知大小）？我能做点像......

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

...获取“js”目录中的所有JavaScript文件？我怎么能用jQuery做到这一点？

Answer 1

一般来说，这可能不是一个好主意，因为你的html文件应该只加载他们实际使用的JS文件。无论如何，这对于任何服务器端脚本语言来说都是微不足道的。只需在将页面提供给客户端之前插入脚本标记。

如果要在不使用服务器端脚本的情况下执行此操作，可以将JS文件放入允许列出目录内容的目录中，然后使用XMLHttpRequest读取目录的内容，并解析出文件名并加载它们。

选项＃3是一个“加载器”JS文件，它使用getScript（）加载所有其他文件。将它放在所有html文件的脚本标记中，然后只需在上传新脚本时更新加载程序文件。

Answer 2

使用服务器端脚本生成脚本标记行怎么样？粗略的，像这样（PHP） -

$handle=opendir("scripts/");

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

closedir($handle);

Answer 3

鉴于您需要100％的客户端解决方案，理论上您可能会这样做：

通过XmlHttpRequest，获取该目录的目录列表页面（如果目录中没有index.html文件，大多数Web服务器将返回文件列表）。

用javascript解析该文件，取出所有.js文件。这当然会对您的Web服务器/ Web主机上的目录列表格式敏感。

动态添加脚本标记，如下所示：

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

Answer 4

您可以使用Grunt Include Source之类的内容。它为您提供了一个很好的语法来预处理您的HTML，然后包含您想要的任何内容。这也意味着，如果你正确设置你的构建任务，你可以让所有这些包括在开发模式，但不是在prod模式，这是非常酷。

如果您没有将Grunt用于您的项目，可能会为Gulp或其他任务选手提供类似的工具。

Answer 5

你不能在JavaScript中这样做，因为JS是在浏览器中执行的，而不是在服务器中执行的，所以它对目录或其他服务器资源一无所知。

最好的选择是使用服务器端脚本，例如jellyfishtree发布的脚本。

Answer 6

@jellyfishtree如果你创建一个包含目录中所有js文件的php文件然后只通过脚本标记包含这个php文件会更好。这具有更好的性能，因为浏览器必须对服务器执行更少的请求。见这个：

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);
   }
?>

的index.php：

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

就是这样！玩得开心！：）

Answer 7

可以完全在客户端完成，但必须指定所有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 8

你不能通过浏览器在Javascript中这样做...如果我是你，我会使用像browserify这样的东西。使用commonjs模块编写代码，然后将javascript文件编译成一个。

在你的html中加载你编译的javascript文件。

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>

如何通过JavaScript文件将所有JavaScript文件包含在目录中？

10 个答案: