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

Ho un sacco di file JavaScript che vorrei includere nella pagina, ma non voglio dover continuare a scrivere

 

Quindi c’è un modo per includere tutti i file in una directory (dimensione sconosciuta)? Posso fare qualcosa come …

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

… per ottenere tutti i file JavaScript nella directory “js”? Come posso farlo usando jQuery?

In generale, probabilmente non è una grande idea, dal momento che il tuo file html dovrebbe caricare solo file JS che effettivamente usano. Indipendentemente da ciò, questo sarebbe banale da fare con qualsiasi linguaggio di scripting lato server. Basta inserire i tag dello script prima di servire le pagine al client.

Se si desidera farlo senza utilizzare lo scripting lato server, è ansible rilasciare i file JS in una directory che consente di elencare il contenuto della directory, quindi utilizzare XMLHttpRequest per leggere il contenuto della directory e analizzare i nomi dei file e caricarli .

L’opzione n. 3 prevede di avere un file JS “loader” che utilizza getScript () per caricare tutti gli altri file. Metti questo in un tag script in tutti i tuoi file html, e poi hai solo bisogno di aggiornare il file loader ogni volta che carichi un nuovo script.

Che dire dell’utilizzo di uno script sul lato server per generare le righe dei tag di script? Crudamente, qualcosa come questo (PHP) –

 $handle=opendir("scripts/"); while (($file = readdir($handle))!==false) { echo ''; } closedir($handle); 

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

Tramite XmlHttpRequest, ottenere la pagina di elenco di directory per quella directory (la maggior parte dei server Web restituisce un elenco di file se non c’è un file index.html nella directory).

Analizza quel file con javascript, estraendo tutti i file .js. Questo sarà ovviamente sensibile al formato della lista di directory sul tuo server web / host web.

Aggiungi i tag script in modo dinamico, con qualcosa di simile a questo:

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

Potresti usare qualcosa come Grunt Include Source . Ti dà una bella syntax che pre-processa il tuo codice HTML e quindi include ciò che vuoi. Ciò significa anche che se si configurano correttamente le attività di compilazione, è ansible includere tutte queste opzioni in modalità dev, ma non in modalità prod, che è piuttosto interessante.

Se non stai usando Grunt per il tuo progetto, probabilmente ci sono strumenti simili per Gulp o altri task runner.

Non è ansible farlo in JavaScript, poiché JS viene eseguito nel browser , non nel server, quindi non sapeva nulla di directory o altre risorse del server.

L’opzione migliore è usare uno script lato server come quello pubblicato da jellyfishtree.

@jellyfishtree sarebbe meglio se crei un file php che include tutti i tuoi file js dalla directory e quindi includi solo questo file php tramite un tag script. Questo ha prestazioni migliori perché il browser deve fare meno richieste al server. Guarda questo:

javascripts.php:

  

index.php:

  

Questo è tutto!
Divertiti! 🙂

Non puoi farlo in Javascript dal browser … Se fossi in te, userei qualcosa come browserify . Scrivi il tuo codice usando i moduli commonjs e poi compila il file javascript in uno solo.

Nel tuo html carica il file javascript che hai compilato.

Può essere fatto completamente lato client, ma tutti i nomi di file javascript devono essere specificati. Ad esempio, come elementi dell’array:

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

Stavo cercando una risposta a questa domanda e ho avuto i miei problemi. Ho trovato un paio di soluzioni in vari luoghi e li ho messi insieme nella 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); } }); } 

Quindi puoi chiamarlo così:

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

Questo esempio chiamerà quella richiamata su ogni file / cartella nella cartella specificata ad eccezione di quelli che iniziano con NOLOAD . Se si desidera caricare effettivamente il file nella pagina, è ansible utilizzare questa altra funzione di aiuto 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 | (immagine comune) file e lo carica. Eseguirà anche i file JS. La chiamata completa che deve essere eseguita nello script per caricare tutte le immagini e * fogli di stile e altri script potrebbe avere il seguente aspetto:

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

Funziona incredibilmente!

Un’altra opzione che è piuttosto breve: