Découpage de fichiers Javascript

Version imprimable

Bonjour,

J'ai un fichier Javascript qui contient un script avec à l'intérieur une variable globale qui contient les infos d'une BDD :

Code:

var bdd = [{"id":100, "name":"foo", ...}, ...];

Pour faciliter la maintenance du code, j'ai déclaré cette variable dans un fichier séparé qui se nomme "bdd.js".

Mon script principal utilise la variable de cette manière :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TITLE</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="content"> </div> <script src="js/jquery.js"></script> <script src="script.js"></script> <script src="bdd.js"></script> </body> </html>
Code:

1 2 3 $(document).ready(function() { updateWebPage(bdd); });
La structure du code est bonne ?... Ma fonction updateWebPage() va s’exécuter uniquement si les deux fichiers .js sont chargés ?... que se passe va t'il se passer si le chargement de "bdd.js" prend du temps par rapport à "script.js" ?

PS : je ne veux pas utiliser AJAX car je veux que mon script fonctionne aussi en local pour faciliter les tests (pas besoin d'installer un outils comme MAMP sur le PC de dev).
PS2 : dans un second temps, j'aimerais pouvoir minimifier et fusionner tous les fichiers (html, css, js, images, ...)... existe t-il un outils simple d'installation et d’utilisation pour faire ça ?... c'est un petit projet, je n'ai donc pas envie d'installer une grosse toolchain pour faire ça.

Merci d'avance,

Salut boboss123,

Et avec l'évènement load https://developer.mozilla.org/fr/doc...dow/load_event

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>  
<html lang="fr">  
	<head>  
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>TITLE</title>
                <script src="bdd.js"></script>
                <script src="js/jquery.js"></script>
		<link rel="stylesheet" href="styles.css">
	</head>
	<body>
		<div id="content">
		</div>
		<script src="script.js" defer></script>
	</body>  
</html>

Code:

1
2
3
4
5
content= document.getElementById('content');
 
window.addEventListener("load", function () {
    content.innerText = updateWebPage()
})

Code:

1
2
3
function updateWebPage() {
    var bdd = [{ "id": 100, "name": "foo" }];
    return(`${bdd[0]["id"]} = ${bdd[0]["name"]}`)}

21/04/2023, 14h09
boboss123

ok merci :)
21/04/2023, 23h01
Beginner.

Salut,

Attention il me semble que ce n'est pas l'usage d'un gestionnaire pour l’événement "load" qui résout le problème...

La solution c'est l'ordre des balises, Il faut les mettre dans un ordre tel que l'on évite d'utiliser un objet avant qu'il soit défini... En l’occurrence il faut que la balise <script src="bdd.js"></script> soit placé en premier, pour être chargé avant les autres scripts qui utilisent l'objet bdd...
24/04/2023, 09h11
boboss123

Salut,

C'est sûr ?

J'aurai pensé que l'ordre des balises donne l'ordre dans lequel les requêtes de téléchargement doivent être effectuées mais ne garanti pas que l’exécution d'un script d'un fichier soit exécuté uniquement si le fichier précédent a été chargé.
24/04/2023, 23h03
Beginner.

Salut,

Citation:

Envoyé par boboss123

C'est sûr ?

J'aurai pensé que l'ordre des balises donne l'ordre dans lequel les requêtes de téléchargement doivent être effectuées mais ne garanti que l’exécution d'un script d'un fichier soit exécuté uniquement si le fichier précédent a été chargé.

- Les scripts sont chargés et exécutés (tout de suite après le chargement) dans l'ordre dans lequel ils apparaissent dans le document HTML*...

En l’occurrence si tu places la balise <script src="bdd.js"></script> en premier (avant les autres scripts) le script bdd.js devrait être chargé puis exécuté avant de passer au script suivant...

La solution c'est donc l'ordre des balises...

- On utilise un gestionnaire pour l’événement "load" pour résoudre un autre problème... Comme on peut le lire ici : https://developer.mozilla.org/fr/doc...dow/load_event

Citation:

L'évènement load est déclenché lorsque la page et toutes ses ressources dépendantes (telles que des feuilles de style et des images) sont complètement chargées.

Il est bien dit "...lorsque la page et toutes ses ressources dépendantes..." et non "lorsque les scripts précédents sont complètement chargées et exécutés"...

* C'est le comportement par défaut qui peut être changé avec les attributs async et defer...
25/04/2023, 13h40
boboss123

ok merci pour ces précisions :D