![](/img/trans.png)
[英]Include all javascript files in a directory to a html file in angularjs? with grunt?
[英]How can I include all JavaScript files in a directory via JavaScript file?
我有一堆我想包含在页面中的 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,获取该目录的目录列表页面(如果目录中没有 index.html 文件,大多数 Web 服务器返回文件列表)。
使用 javascript 解析该文件,提取所有 .js 文件。 这当然对您的网络服务器/网络主机上目录列表的格式很敏感。
动态添加脚本标签,像这样:
function loadScript (dir, file) {
var scr = document.createElement("script");
scr.src = dir + file;
document.body.appendChild(scr);
}
它可以完全在客户端完成,但必须指定所有 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);
}
}
@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);
}
?>
索引.php:
<script type="text/javascript" src="javascripts.php"></script>
而已!
玩得开心: :)
您可以使用Grunt Include Source 之类的东西。 它为您提供了一个很好的语法来预处理您的 HTML,然后包含您想要的任何内容。 这也意味着,如果你正确地设置了你的构建任务,你可以在开发模式下包含所有这些内容,而不是在生产模式下,这非常酷。
如果您的项目没有使用 Grunt,Gulp 或其他任务运行器可能有类似的工具。
你不能在 JavaScript 中这样做,因为 JS 是在浏览器中执行的,而不是在服务器中执行的,所以它对目录或其他服务器资源一无所知。
最好的选择是使用服务器端脚本,例如 jellyfishtree 发布的脚本。
您不能在浏览器中使用 Javascript 执行此操作...如果我是您,我会使用browserify之类的东西。 使用 commonjs 模块编写代码,然后将 javascript 文件编译成一个。
在您的 html 中加载您编译的 javascript 文件。
我一直在寻找这个问题的答案并且遇到了自己的问题。 我在不同的地方找到了几个解决方案,并将它们组合成我自己喜欢的答案。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.