¿Cómo puedo incluir todos los archivos JavaScript en un directorio a través del archivo JavaScript?

Question

Tengo un montón de archivos JavaScript que me gustaría incluir en la página, pero no quiero tener que seguir escribiendo

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

Entonces, ¿hay una manera de incluir todos los archivos en un directorio (tamaño desconocido)? ¿Puedo hacer algo como ...

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

... para obtener todos los archivos de JavaScript en el directorio "js"? ¿Cómo puedo hacer esto usando jQuery?

Answer 1

En general, esto probablemente no es una gran idea, ya que su archivo html debe ser sólo de carga archivos JS que en realidad hacen uso de. En cualquier caso, este sería trivial que ver con cualquier lenguaje de script del lado del servidor. Sólo tiene que insertar las etiquetas de script antes de servir las páginas para el cliente.

Si desea hacerlo sin el uso de secuencias de comandos del lado del servidor, se puede soltar los archivos JS en un directorio que permite la lista el contenido del directorio, y luego usar XMLHttpRequest para leer los contenidos del directorio, y analizar los nombres de archivo y cargarlos.

Opción # 3 es tener un archivo "cargador" JS que utiliza getScript () para cargar todos los otros archivos. Puesto que en una etiqueta de script en todos sus archivos html, y luego sólo tiene que actualizar el archivo de carga cada vez que se carga un nuevo guión.

Answer 2

¿Qué pasa con el uso de un script del lado del servidor para generar las líneas de etiqueta guión? Crudamente, algo como esto (PHP) -

$handle=opendir("scripts/");

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

closedir($handle);

Answer 3

Dado que usted quiere una solución del lado del cliente 100%, en la teoría de que probablemente podría hacer esto:

A través de XmlHttpRequest, obtener la página de listado de directorio para ese directorio (la mayoría de los servidores web devuelven una lista de archivos si no hay un archivo index.html en el directorio).

Parse ese archivo con javascript, sacando todos los archivos .js. Esto, por supuesto, ser sensible al formato de la lista de directorios en su servidor web / red de acogida.

Añadir las etiquetas script de forma dinámica, con algo como esto:

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

Answer 4

Se podría utilizar algo como ronco incluyen fuente . Se le da una buena sintaxis que preprocesa el código HTML, y luego incluye lo que quiera. Esto también significa que, si se configura correctamente sus tareas de construcción, se puede tener todo esto en modo incluye dev, pero no en modo prod, que está muy bien.

Si no está utilizando ronco para su proyecto, no es probable que las herramientas similares para Gulp, u otros corredores de trabajo.

Answer 5

No se puede hacer eso en JavaScript, ya que JS se ejecuta en el navegador , no en el servidor, por lo que no sabía nada de directorios u otros recursos del servidor.

La mejor opción es usar un script del lado del servidor como el publicado por jellyfishtree.

Answer 6

@jellyfishtree sería mejor si se crea un archivo php que incluye todos los archivos de los js del directorio y sólo incluye este archivo PHP a través de una etiqueta de script. Esto tiene un mejor rendimiento, ya que el navegador tiene que ver menos peticiones al servidor. Ver esto:
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>

Eso es todo!
¡Que te diviertas! :)

Answer 7

No se puede hacer eso en Javascript del navegador ... Si yo fuera usted, me gustaría usar algo como browserify . Escribir el código utilizando módulos CommonJS y luego compilar el archivo javascript en una sola.

En su carga el archivo html javascript que se ha compilado.

Answer 8

Se puede hacer totalmente del lado del cliente, pero todos los nombres de los archivos JavaScript debe ser especificado. Por ejemplo, como elementos de matriz:

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

Yo estaba buscando una respuesta a esta pregunta y tenía mis propios problemas. He encontrado un par de soluciones en diversos lugares y ponerlos juntos en mi propia respuesta preferida.

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

A continuación, se le puede llamar así:

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

En este ejemplo se va a llamar a esa llamada de retorno en cada archivo / carpeta en la carpeta especificada en excepto para los que se inician con NOLOAD. Si desea cargar en realidad el archivo en la página, puede utilizar esta otra función auxiliar que he desarrollado.

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

Esta función acepta un JS | CSS | archivo (imagen común) y lo carga. También ejecutará los archivos JS. La convocatoria completa que deba llevarse a cabo en el script para cargar todas las imágenes y * hojas de estilo y otras secuencias de comandos podría tener este aspecto:

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

Funciona increíblemente!

Answer 10

Otra opción que es bastante corto:

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