Как включить все файлы JavaScript в каталог через файл JavaScript?

Ответ 1

В общем, это, вероятно, не очень хорошая идея, так как ваш html файл должен загружать только файлы JS, которые они фактически используют. Независимо от того, это было бы тривиально делать с любым серверным скриптовым языком. Просто вставьте теги script перед тем, как обслуживать страницы для клиента.

Если вы хотите сделать это без использования серверных сценариев, вы можете удалить свои JS файлы в каталог, который позволяет перечислять содержимое каталога, а затем использовать XMLHttpRequest для чтения содержимого каталога и проанализировать имена файлов и загрузите их.

Вариант № 3 должен иметь JS файл "loader", который использует getScript() для загрузки всех других файлов. Поместите это в тег script во все ваши html файлы, а затем вам просто нужно обновить файл загрузчика всякий раз, когда вы загружаете новый script.

Ответ 2

Как насчет использования серверной стороны script для генерации тэгов script? Грубо, что-то вроде этого (PHP) -

$handle=opendir("scripts/");

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

closedir($handle);

Ответ 3

Учитывая, что вы хотите 100% -ное решение на стороне клиента, теоретически вы могли бы это сделать:

Через XmlHttpRequest найдите страницу списка каталогов для этого каталога (большинство веб-серверов возвращают список файлов, если в каталоге нет файла index.html).

Разберите этот файл с помощью javascript, вытаскивая все .js файлы. Это, конечно, будет чувствительным к формату списка каталогов на вашем веб-сервере/веб-хосте.

Добавьте теги script динамически, с чем-то вроде этого:

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

Ответ 4

Вы можете использовать что-то вроде Grunt Include Source. Это дает вам хороший синтаксис, который препроцессирует ваш HTML, а затем включает в себя все, что вы хотите. Это также означает, что если вы правильно настроили задачи сборки, вы можете включить все это в режиме dev, но не в режиме prod, что довольно круто.

Если вы не используете Grunt для своего проекта, возможно, похожие инструменты для Gulp или других участников задач.

Ответ 5

Вы не можете сделать это в JavaScript, поскольку JS выполняется в браузере, а не на сервере, поэтому он ничего не знал о каталогах или других ресурсах сервера.

Самый лучший вариант - использовать серверную часть script, такую ​​как опубликованная jellyfishtree.

Ответ 6

@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>

Что это!
Повеселись!:)

Ответ 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);
   } 
 }

Ответ 8

Вы не можете сделать это в Javascript из браузера... Если бы я был вами, я бы использовал что-то вроде browserify. Напишите свой код с помощью модулей commonjs, а затем скомпилируйте файл javascript в один.

В вашем html загрузите файл javascript, который вы скомпилировали.

Ответ 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 файлы. Полный вызов, который должен быть запущен в script для загрузки всех изображений и * таблиц стилей и, может выглядеть так:

loadingConfig = {
    callback: loadfile,
    then: function(numFiles) { console.log("Finished loading " + numFiles + " files"); },
    recursive: true,
    ignore: /^NOLOAD/,
};
exploreFolder('/someFolderURL/', loadingConfig);

Это работает удивительно!

Ответ 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>