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