Как я могу включить все файлы JavaScript в каталог с помощью JavaScript file?

Question

У меня есть куча файлов JavaScript, которые я хотел бы включить на страницу, но я не хочу продолжать писать

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

Итак, есть ли способ включить все файлы в каталог (неизвестного размера)?Могу ли я сделать что-то вроде...

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

...чтобы получить все файлы JavaScript в каталоге "js"?Как я могу это сделать с помощью jQuery?

Answer 1

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

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

Опция № 3 - иметь файл «Loader» JS, который использует Teskcript () для загрузки всех других файлов. Поместите это в тег сценария во всех ваших файлах 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% -ное решение клиента, в теории, которые вы, вероятно, могли бы сделать это:

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

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

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

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

Answer 4

Вы могли бы использовать что-то вроде Грунт включает источник. Отказ Это дает вам хороший синтаксис, который предварительно искусывает ваш HTML, а затем включает в себя все, что вы хотите. Это также означает правильно, если вы настроите ваши задачи сборки правильно, вы можете иметь все это включает в себя в режиме разработки, но не в режиме PROD, который довольно круто.

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

Answer 5

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

Лучший вариант использует скрипт бокового сервера, подобный тому, который опубликован Джеллимымтрием.

Answer 6

@JellyfishTree Было бы лучше, если вы создадите один файл PHP, который включает в себя все ваши файлы 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>

Вот и все!
Радоваться, веселиться! :)

Answer 7

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

В вашем 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

Я искал ответ на этот вопрос, и у меня были свои проблемы.Я нашел пару решений в разных местах и объединил их в свой собственный предпочтительный ответ.

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 | (common image) и загружает его.Он также выполнит файлы 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>