У меня есть куча файлов JavaScript, которые я хотел бы включить в эту страницу, но я не хочу продолжать писать
<script type="text/javascript" src="js/file.js"></script>
Итак, есть способ включить все файлы в каталог (неизвестный размер)? Могу ли я сделать что-то вроде...
$.getScript("js/*.js");
... получить все файлы JavaScript в каталоге "js"? Как это сделать с помощью jQuery?
В общем, это, вероятно, не очень хорошая идея, так как ваш html файл должен загружать только файлы JS, которые они фактически используют. Независимо от того, это было бы тривиально делать с любым серверным скриптовым языком. Просто вставьте теги script перед тем, как обслуживать страницы для клиента.
Если вы хотите сделать это без использования серверных сценариев, вы можете удалить свои JS файлы в каталог, который позволяет перечислять содержимое каталога, а затем использовать XMLHttpRequest для чтения содержимого каталога и проанализировать имена файлов и загрузите их.
Вариант № 3 должен иметь JS файл "loader", который использует getScript() для загрузки всех других файлов. Поместите это в тег script во все ваши html файлы, а затем вам просто нужно обновить файл загрузчика всякий раз, когда вы загружаете новый script.
Как насчет использования серверной стороны script для генерации тэгов script? Грубо, что-то вроде этого (PHP) -
$handle=opendir("scripts/");
while (($file = readdir($handle))!==false) {
echo '<script type="text/javascript" src="$file"></script>';
}
closedir($handle);
Учитывая, что вы хотите 100% -ное решение на стороне клиента, теоретически вы могли бы это сделать:
Через XmlHttpRequest найдите страницу списка каталогов для этого каталога (большинство веб-серверов возвращают список файлов, если в каталоге нет файла index.html).
Разберите этот файл с помощью javascript, вытаскивая все .js файлы. Это, конечно, будет чувствительным к формату списка каталогов на вашем веб-сервере/веб-хосте.
Добавьте теги script динамически, с чем-то вроде этого:
function loadScript (dir, file) {
var scr = document.createElement("script");
scr.src = dir + file;
document.body.appendChild(scr);
}
Вы можете использовать что-то вроде Grunt Include Source. Это дает вам хороший синтаксис, который препроцессирует ваш HTML, а затем включает в себя все, что вы хотите. Это также означает, что если вы правильно настроили задачи сборки, вы можете включить все это в режиме dev, но не в режиме prod, что довольно круто.
Если вы не используете Grunt для своего проекта, возможно, похожие инструменты для Gulp или других участников задач.
Вы не можете сделать это в JavaScript, поскольку JS выполняется в браузере, а не на сервере, поэтому он ничего не знал о каталогах или других ресурсах сервера.
Самый лучший вариант - использовать серверную часть script, такую как опубликованная jellyfishtree.
@jellyfishtree было бы лучше, если бы вы создали один php файл, который включает в себя все ваши js файлы из каталога, а затем включите этот php файл только через тег script. Это имеет лучшую производительность, потому что браузер должен делать меньше запросов на сервер. Смотрите это:
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 должны быть указаны. Например, в качестве элементов массива:
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);
}
}
Вы не можете сделать это в 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 файлы. Полный вызов, который должен быть запущен в script для загрузки всех изображений и * таблиц стилей и, может выглядеть так:
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>