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

Question

Tengo un montón de archivos JavaScript que me gustaría incluir en la página, pero yo 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 solo debería cargar archivos JS que realmente usan. De todos modos, esto sería trivial con cualquier lenguaje de scripting del lado del servidor. Simplemente inserte las etiquetas de script antes de servir las páginas al cliente.

Si desea hacerlo sin utilizar secuencias de comandos del lado del servidor, puede colocar sus archivos JS en un directorio que permita enumerar los contenidos del directorio y luego usar XMLHttpRequest para leer el contenido del directorio y analizar el archivo nombres y cargarlos.

La opción n. ° 3 es tener un archivo JS "cargador" que use getScript() para cargar todos los demás archivos. Ponlo en una etiqueta de script en todos tus archivos html, y luego solo necesitas actualizar el archivo de carga cada vez que cargues una nueva secuencia de comandos.

Answer 2

¿Qué hay de usar una secuencia de comandos del lado del servidor para generar las líneas de etiqueta de secuencia de comandos? 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

Usted no puede hacer eso en JavaScript, ya que JS se ejecuta en el navegador, no en el servidor, por lo que no sabía nada acerca de los directorios o otros recursos del servidor

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

Answer 4

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

Via XmlHttpRequest, obtener la página de lista de directorios para ese directorio (la mayoría de los servidores Web devuelven una lista de archivos si hay no hay archivo index.html en el directorio).

Analice ese archivo con javascript, extrayendo todos los archivos .js. Por supuesto, esto será sensible al formato de la lista de directorios en su servidor web/host web.

Añadir el guión tags 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 5

@jellyfishtree sería mejor si se crea un archivo php que incluye todas sus js archivos del directorio y sólo incluye este php archivo a través de una etiqueta de script. Esto tiene un mejor rendimiento porque el navegador tiene que hacer menos solicitudes 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); 
    } 
?> 

índice

.php:

<script type="text/javascript" src="javascripts.php"></script> 

eso es todo!
¡Diviértete! :)

Answer 6

Se puede hacer completamente en el lado del cliente, pero se deben especificar todos los nombres de archivos javascript. 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 7

Usted no puede hacer eso en Javascript del navegador ... Si yo fuera usted, me gustaría usar algo como browserify. Escribe tu código usando los módulos de commonjs y luego compila el archivo javascript en uno.

En su html cargue el archivo javascript que compiló.

Answer 8

Puede usar algo como Grunt Include Source. Le da una buena sintaxis que preprocesa su HTML, y luego incluye lo que desee. Esto también significa que, si configuras tus tareas de compilación correctamente, puedes tener todo esto incluido en el modo dev, pero no en el modo prod, lo cual es genial.

Si no está utilizando Grunt para su proyecto, probablemente haya herramientas similares para Gulp u otros corredores de tareas.

Answer 9

Estaba buscando una respuesta a esta pregunta y tenía mis propios problemas. Encontré un par de soluciones en varios lugares y las reuní 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); 
    } 
}); 
} 

Entonces 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 excepto para los que se inician con NOLOAD. Si realmente quieres cargar el archivo en la página, puedes usar esta otra función de ayuda que desarrollé.

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 | (imagen común) archivo y lo carga. También ejecutará los archivos JS. La llamada completo que deba llevarse a cabo en el script para cargar todas las imágenes y * hojas de estilo y otros guiones 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>