Come posso includere tutti i file JavaScript in una directory tramite file JavaScript?

Question

Ho un mucchio di JavaScript file che vorrei includere nella pagina, ma io non voglio avere a continuare a scrivere

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

Quindi non v'è un modo per includere tutti i file in una directory (dimensione sconosciuta)? Posso fare qualcosa di simile ...

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

... per ottenere tutti i file JavaScript nella directory "js"? Come posso fare questo usando jQuery?

Answer 1

In generale, questo non è probabilmente una buona idea, dal momento che il file HTML dovrebbe essere solo di caricamento file JS che in realtà fanno uso di. Indipendentemente da ciò, questo sarebbe banale a che fare con qualsiasi linguaggio di scripting server-side. Basta inserire i tag di script prima di servire le pagine per il cliente.

Se si vuole fare senza usare lo scripting lato server, è possibile rilasciare i file JS in una directory che permette di elencare i contenuti della directory, e quindi utilizzare XMLHttpRequest per leggere il contenuto della directory, e analizzare i nomi dei file e caricarli.

Opzione # 3 è quello di avere un file "loader" JS che utilizza getScript () per caricare tutti gli altri file. Metti che in un tag script in tutti i tuoi file html, e quindi non vi resta che aggiornare il file del caricatore ogni volta che si carica un nuovo script.

Answer 2

Che dire utilizzando uno script lato server per generare le linee di tag script? Crudamente, qualcosa di simile (PHP) -

$handle=opendir("scripts/");

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

closedir($handle);

Answer 3

Dato che si desidera una soluzione lato client 100%, in teoria, si potrebbe probabilmente fare questo:

Via XmlHttpRequest, ottenere la pagina che elenca directory per quella directory (la maggior parte dei server web restituiscono un elenco di file se non v'è alcun file index.html nella directory).

Parse che file con javascript, tirando fuori tutti i file .js. Questo sarà ovviamente sensibile al formato della directory listing sul vostro host web server / web.

Aggiungere i tag di script in modo dinamico, con qualcosa di simile:

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

Answer 4

Si potrebbe usare qualcosa come Grunt Includere Fonte . Ti dà un bel sintassi che preprocessa il codice HTML, e quindi comprende quello che vuoi. Questo anche i mezzi, se si imposta le attività di compilazione correttamente, è possibile avere tutti questi comprende in modalità dev, ma non in modalità prod, che è piuttosto fresco.

Se non si utilizza Grunt per il vostro progetto, non c'è strumenti probabilmente simili per Gulp, o altri corridori compito.

Answer 5

Non si può farlo in JavaScript, in quanto JS viene eseguito nel browser , non nel server, in modo che non sapeva niente di directory o altre risorse del server.

L'opzione migliore sta usando uno script lato server come quello pubblicato da jellyfishtree.

Answer 6

@jellyfishtree sarebbe meglio se si crea un file php che include tutti i file js tuoi dalla directory e quindi includere solo il file php tramite un tag script. Questo ha una migliore performance in quanto il browser deve fare meno richieste al server. Vedere questo:
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>

Questo è tutto!
Divertiti! :)

Answer 7

Non si può farlo in Javascript dal browser ... Se fossi in te, vorrei utilizzare qualcosa come browserify . Scrivere il codice utilizzando i moduli commonjs e quindi compilare il file javascript in uno.

Nel vostro carico html il file javascript che avete compilato.

Answer 8

Si può fare pienamente lato client, ma tutti i nomi di file JavaScript deve essere specificato. Ad esempio, come elementi di matrice:

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

Ero alla ricerca di una risposta a questa domanda e avuto i miei problemi. Ho trovato un paio di soluzioni in diversi luoghi e metterli insieme in mia risposta preferita.

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

Poi si può chiamare in questo modo:

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

In questo esempio chiamerà che callback su ogni file / cartella nella cartella specificata eccezione per quelli che iniziano con NOLOAD. Se si desidera caricare effettivamente il file nella pagina quindi è possibile utilizzare questa altra funzione di supporto che ho sviluppato.

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

Questa funzione accetta un JS | CSS | file (immagine comune) e lo carica. Sarà anche eseguire i file JS. La chiamata completo che deve essere eseguito nello script per caricare tutte le immagini e * i fogli di stile e altri script potrebbe essere la seguente:

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

Funziona incredibilmente!

Answer 10

Un'altra opzione che è piuttosto breve:

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