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

Question

J'ai un tas de fichiers JavaScript que j'aimerais inclure dans la page, mais je ne veux pas avoir à écrire sans arrêt

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

Existe-t-il un moyen d'inclure tous les fichiers d'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, ce n'est probablement pas une bonne idée, puisque votre fichier html ne devrait charger que les fichiers JS qu'il utilise réellement. Quoi qu'il en soit, ce serait trivial à réaliser avec n'importe quel langage de script côté serveur. Il suffit d'insérer les balises script avant de servir les pages au client.

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

L'option n°3 est d'avoir un fichier JS "loader" qui utilise getScript() pour charger tous les autres fichiers. Placez ce fichier dans une balise script dans tous vos fichiers html, et vous n'aurez plus qu'à mettre à jour le fichier loader à chaque fois que vous téléchargerez un nouveau script.

Answer 2

Pourquoi ne pas utiliser un script côté serveur pour générer les balises script ? Grossièrement, quelque chose comme ceci (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 souhaitez une solution 100% côté client, en théorie, vous pouvez probablement le faire :

Via XmlHttpRequest, obtenez la page de liste de ce répertoire (la plupart des serveurs web renvoient une liste de fichiers s'il n'y a pas de fichier index.html dans le répertoire).

Analyser ce fichier avec javascript, en extrayant tous les fichiers .js. Cela dépendra bien sûr du format de la liste des répertoires sur votre serveur web / hébergeur.

Ajoutez les balises script dynamiquement, avec quelque chose comme ceci :

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

Answer 4

@jellyfishtree il serait préférable que vous créiez un fichier php qui inclut tous vos fichiers js du répertoire et que vous n'incluiez que ce fichier php via une balise script. Cela permet de meilleures performances car le navigateur doit faire moins de 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>

C'est tout !
Amusez-vous bien ! :)

Answer 5

Il est possible de le faire côté client, mais tous les noms de fichiers javascript doivent être spécifiés. Par exemple, en tant qu'éléments d'un 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);
   } 
 }