Comment puis-je inclure tous les fichiers JavaScript dans un répertoire via un fichier JavaScript?

Question

J'ai un tas de fichiers JavaScript que je voudrais inclure dans la page, mais je ne veux pas avoir à continuer à écrire

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

Ainsi est-il un moyen d'inclure tous les fichiers dans un répertoire (taille inconnue)? Puis-je faire quelque chose comme ...

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

... pour obtenir tous les fichiers JavaScript dans le répertoire « js »? Comment puis-je faire cela en utilisant jQuery?

Answer 1

En général, cela est probablement pas une bonne idée, puisque votre fichier html ne doit être des fichiers JS chargement qu'ils font usage de. Quoiqu'il en soit, ce serait trivial à voir avec tout langage de script côté serveur. Il suffit d'insérer les balises de script avant de servir les pages au client.

Si vous voulez le faire sans utiliser les scripts côté serveur, vous pouvez déposer vos fichiers JS dans un répertoire qui permet lister le contenu du répertoire, puis utilisez XMLHttpRequest pour lire le contenu du répertoire, et analyser les noms de fichiers et de les charger.

Option n ° 3 est d'avoir un fichier JS « loader » qui utilise getScript () pour charger tous les autres fichiers. Mettez ça dans une balise de script dans tous vos fichiers html, et puis il vous suffit de mettre à jour le fichier chargeur chaque fois que vous téléchargez un nouveau script.

Answer 2

Qu'en est-il à l'aide d'un script côté serveur pour générer les lignes de balises de script? Grossièrement, quelque chose comme ça (PHP) -

$handle=opendir("scripts/");

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

closedir($handle);

Answer 3

Étant donné que vous voulez une solution côté client 100%, en théorie, vous pourriez probablement faire ceci:

Via XMLHttpRequest, obtenir la page la liste des répertoires pour ce répertoire (la plupart des serveurs Web renvoient une liste des fichiers s'il n'y a pas de fichier index.html dans le répertoire).

Parse ce fichier avec javascript, tirant tous les fichiers .js. Cette volonté d'être bien sûr sensible au format du répertoire sur votre liste serveur web / hébergeur.

Ajoutez les balises de script dynamique, avec quelque chose comme ceci:

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

Answer 4

Vous pouvez utiliser quelque chose comme Grunt Inclure Source. Il vous donne une syntaxe bien que votre HTML prétraite, et comprend alors tout ce que vous voulez. Cela a également des moyens, si vous configurez correctement vos tâches de construction, vous pouvez avoir tout cela inclut en mode dev, mais pas en mode prod, ce qui est assez cool.

Si vous n'utilisez pas Grunt pour votre projet, il y a des outils probablement similaires pour Gulp, ou d'autres coureurs de la tâche.

Answer 5

Vous ne pouvez pas le faire en JavaScript, puisque JS est exécuté dans le navigateur , pas sur le serveur, il ne savait pas quoi que ce soit sur les répertoires ou d'autres ressources du serveur.

La meilleure option est d'utiliser un script côté serveur comme celui affiché par jellyfishtree.

Answer 6

@jellyfishtree il serait mieux si vous créez un fichier php qui comprend tous vos fichiers js du répertoire et seulement inclure ce fichier php via une balise de script. Cela a une meilleure performance parce que le navigateur doit faire moins des requêtes au serveur. Voir ceci:
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>

Ca y est!
S'amuser! :)

Answer 7

Vous ne pouvez pas le faire en Javascript du navigateur ... Si je vous, je voudrais utiliser quelque chose comme browserify . Écrivez votre code à l'aide de modules CommonJS puis compiler le fichier javascript dans un.

Dans votre charge html le fichier javascript que vous avez compilé.

Answer 8

Il peut être fait entièrement côté client, mais tous les noms de fichier Javascript doit être spécifié. Par exemple, comme éléments du tableau:

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

Je cherchais une réponse à cette question et avait mes propres problèmes. J'ai trouvé des solutions de couple dans divers endroits et les mettre ensemble dans ma propre réponse préférée.

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);
    }
});
}

Ensuite, vous pouvez l'appeler comme ceci:

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);

Cet exemple appellera que le rappel sur chaque fichier / dossier dans le dossier spécifié sauf pour ceux qui commencent par NOLOAD. Si vous voulez charger réellement le fichier dans la page, vous pouvez utiliser cette autre fonction d'aide que j'ai développé.

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);
        }
    }
})();

Cette fonction accepte un JS | CSS | fichier (image commune) et la charge. Il exécutera également les fichiers JS. L'appel complet qui doit être exécuté dans votre script pour charger toutes les images et * stylesheets et d'autres scripts pourraient ressembler à ceci:

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

Il fonctionne étonnamment!

Answer 10

Une autre option qui est assez courte:

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