如何通过JavaScript文件将所有JavaScript文件包含在目录中？
https://stackoverflow.com/questions/4175008
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一堆我想在页面中包含的JavaScript文件，但我不想继续写作
<script type="text/javascript" src="js/file.js"></script>
因此，有没有办法将所有文件包括在目录中（未知大小）？我可以做吗...
$.getScript("js/*.js");
...要在“ JS”目录中获取所有JavaScript文件？我该如何使用jQuery？
解决方案
通常，这可能不是一个好主意，因为您的HTML文件应仅加载实际使用的JS文件。无论如何，这与任何服务器端脚本语言都很微不足道。只需在将页面提供给客户端之前插入脚本标签即可。
如果您想在不使用服务器端脚本的情况下执行此操作，则可以将JS文件放入允许列出目录内容的目录中，然后使用XMLHTTPRequest读取目录的内容，然后分析文件名并加载它们并加载它们。
选项＃3是使用一个“加载程序” JS文件，该文件使用getScript（）加载所有其他文件。将其放入所有HTML文件中的脚本标签中，然后只需在上传新脚本时更新加载程序文件即可。
其他提示
如何使用服务器端脚本生成脚本标签行？粗鲁，类似的东西（PHP） -
$handle=opendir("scripts/");
while (($file = readdir($handle))!==false) {
echo '<script type="text/javascript" src="$file"></script>';
}
closedir($handle);
考虑到您想要100％的客户端解决方案，从理论上讲，您可能会这样做：
通过XMLHTTPRequest，获取该目录的目录列表页面（大多数Web服务器在目录中没有index.html文件的情况下返回文件列表）。
用JavaScript解析该文件，从而删除所有.js文件。当然，这将对您的Web服务器 / Web主机上的目录列表的格式敏感。
用类似的内容动态添加脚本标签：
function loadScript (dir, file) {
var scr = document.createElement("script");
scr.src = dir + file;
document.body.appendChild(scr);
}
您可以使用类似的东西 咕unt包含来源. 。它为您提供了一个很好的语法，可以预处理您的HTML，然后包括您想要的任何内容。这也意味着，如果您正确地设置了构建任务，则可以将所有这些都包含在开发模式下，而不是在产品模式下，这很酷。
如果您不为项目使用Grunt，则可能有类似的GULP工具或其他任务跑步者。
您不能在JavaScript中执行此操作，因为JS在 浏览器, ，不在服务器中，因此对目录或其他服务器资源一无所知。
最好的选择是使用服务器端脚本，如jellyfishtree发布的脚本。
@jellyfishtree如果您创建一个来自目录中的所有JS文件，然后仅通过脚本标签包含此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>
而已！
玩得开心！ :)
您不能在浏览器的JavaScript中做到这一点...如果我是您，我会使用类似的东西 浏览. 。使用CONCORJS模块编写代码，然后将JavaScript文件编译为一个。
在您的HTML中，加载您编译的JavaScript文件。
可以完全客户端完成，但是必须指定所有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);
}
}
我一直在寻找这个问题的答案，并有自己的问题。我在各个地方找到了一些解决方案，并将它们放在我自己的首选答案中。
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);
它可以工作！
另一个很短的选择：
<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>
