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

我有一堆JavaScript文件，我想包括在页面中，但是我不想一直写下去

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

那么有没有办法将所有文件包含在目录中（未知大小）？ 我可以做些什么…

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

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

Answer 1

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

如果你想在不使用服务器端脚本的情况下执行它，你可以将你的JS文件放到允许列出目录内容的目录中，然后使用XMLHttpRequest来读取目录的内容，parsing出文件名并加载它们。

选项＃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

鉴于你想要一个100％的客户端解决scheme，理论上你可以做到这一点：

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

用javascriptparsing这个文件，把所有.js文件拉出来。 这当然会对Web服务器/ Web主机上的目录列表的格式敏感。

dynamic添加脚本标签，如下所示：

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

Answer 4

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

最好的select是使用像jellyfishtree发布的服务器端脚本。

Answer 5

你可以使用像Grunt Include Source这样的东西。 它给你一个很好的语法来预处理你的HTML，然后包含任何你想要的。 这也意味着，如果你正确地设置了你的构build任务，你可以把所有这些包括在开发模式中，而不是在prod模式下，这很酷。

如果你的项目没有使用Grunt，那么Gulp或者其他任务运行者可能有类似的工具。

Answer 6

@jellyfishtree这将是一个更好的，如果你创build一个PHP文件，其中包括目录中的所有js文件，然后通过脚本标签只包括这个PHP文件。 这具有更好的性能，因为浏览器必须对服务器做更less的请求。 看到这个：

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中从浏览器中做到这一点…如果我是你，我会使用像browserify的东西。 使用commonjs模块编写代码，然后将JavaScript文件编译成一个。

在你的html加载你编译的JavaScript文件。

Answer 8

它可以做到完全客户端，但所有的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 9

我正在寻找这个问题的答案，并有我自己的问题。 我在不同的地方find了一些解决scheme，并把它们放在我自己喜欢的答案中。

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

此示例将调用指定文件夹中每个文件/文件夹的callback， 除了以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>