Découpage de fichiers Javascript

**boboss123** · 21/04/2023, 09h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

**ASCIIDEFOND** · 21/04/2023, 11h40

Salut boboss123,

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**boboss123** · 21/04/2023, 14h09

ok merci

**Beginner.** · 21/04/2023, 23h01

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

**boboss123** · 24/04/2023, 09h11

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

**Beginner.** · 24/04/2023, 23h03

Salut,

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

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

**boboss123** · 25/04/2023, 13h40

ok merci pour ces précisions

Découpage de fichiers Javascript

JavaScript

Discussions similaires

Partager

Partager