Importer/exporter des variables et des fonctions

Version imprimable

08/03/2020, 16h01
nadfri2019

Importer/exporter des variables et des fonctions

Bonjour, la question peut paraître trivial pour certains, mais je n'ai pas trouvé un bon tuto au sujet des import/export en Javascript.

J'ai plusieurs page HTML utilisant le même script mise à part une ou 2 fonctions qui sont modifiés spécifiquement pour chacune d'elle.

Ce qui fait que j'ai au final un script par page. Et quand je veux faire une petite modification, je dois aller modifier tous les scripts.

J'aimerai bien avoir un script unique que toutes les pages utilisent, et donc facilement modifiable, et juste un petit script avec ma fonction spécifique pour chaque page.

La question est, comment faire pour que le script principale puisse utiliser une fonction et des variables qui sont dans un autre script?

Cdt.

Salut,

Je ne sais pas où tu as "cherché" mais c'est étonnant que tu n'aies pas trouvé de réponse!

Principe:
Imaginons que tu veuilles afficher la date du jour sur toutes les pages de ton site, en haut de page.

1) Tu crées ton script qui affiche la date:
Code:

1 2 3 4 5 6 7 8 window.addEventListener("load",function(){ const d=document.createElement("div"); d.textContent=`Nous sommes le ${new Intl.DateTimeFormat( undefined, {day:"numeric",weekday:"long",month:"long",year:"numeric"}) .format(new Date())}.` document.body.insertBefore(d,document.body.firstChild); });
2) Tu copies ce code dans un fichier vierge que tu appelles date.js.

3) Tu insères dans le head de tes pages la ligne suivante:

Code:

<script src="date.js"></script>

Voilà.

08/03/2020, 17h14
nadfri2019

En fait,

Pour etre plus clair,

je suis entrain de faire un casse-brique avec différents niveaux. Un niveau par page.

Le script est identique sur toutes pages sauf la fonction qui s'occupe de l'affichage des bricks, sinon tous les niveaux seraient identiques ;).

Je veux isoler cette fonction dans un autre script, afin d'eviter à avoir un gros script à chaque page, et surtout pour la mise à jour du script en cas de bug.
A l'heure actuelle, quand je découvre un bug, je dois mofidier le code sur chaque page.

Voici un schema:
page 1 contient script 1
page 2 contient script 2
page 3 contient script 3

et je voudrais avoir:

page 1,2,3 pointe vers le même script + script contenant uniquement la fonction de l'affichage des briques personnalisées

Je sais qu'il faut faire le script de la fonction dans un fichier séparé avec un export, afin de pouvoir l'importer dans le fichier Js principale, mais je n'arrive pas à trouver la procédure.
08/03/2020, 17h26
javatwister

Citation:

Envoyé par nadfri2019

je n'arrive pas à trouver la procédure.

Ah bon? A quoi a servi ma réponse, alors? :roll:
08/03/2020, 17h37
nadfri2019

J'arrive pas à m'exprimer clairement :(.

Je n'ai pas de problème à lancer un script via le head, le problème est plutot le suivant:

J'ai un script principal contenant 3 fonctions par exemple:
Script.js =>
-init()
-construction()
-affichage() cette fonction a besoin de la fonction construction() pour fonctionner

je veux isoler la fonction "construction()" dans un autre script, car sur toutes mes pages, init() et affichage() sont toujours identiques.

Une fois construction() dans un fichier séparé, comment faire pour l'appeler dans le fichier principale, vu qu'il ne peut pas être reconnu en l'etat?
08/03/2020, 17h50
javatwister

:whistle:

Code:

<script src="fichier_qui_contient_construction.js"></script>

:whistle:
08/03/2020, 18h04
nadfri2019

J'ai compris mon erreur, en effet ta méthode marche ;)

Comme j'ai l'habitude de mettre des window.onload en debut de tout mes scripts, ca faisait bugger l'app.

Et en le retirant simplement du script construction(), ca marche nickel ;).

Moi qui me prenait la tete avec import function ect....

Je te remercie.
08/03/2020, 18h21
nadfri2019

Dernière question, comment fait-on pour les variables?

Afin qu'elles soient reconnues indépendamment du fichier?
08/03/2020, 18h31
javatwister

Ben il faudrait un exemple, un bout de code, quoi...
Mais une variable globale dans un fichier externe reste une variable accessible à tous les niveaux du code;

En reprenant ton exemple:

Code:

1
2
3
4
5
6
7
8
<html>
<head>
          <script src="date.js"></script>
	  <script src="script.js"></script>
</head>
<body>
</body>
</html>

date.js:

Code:

1
2
3
4
5
6
7
8
window.addEventListener("load",function(){
	const d=document.createElement("div");
	d.textContent=`Nous sommes le ${new Intl.DateTimeFormat(
		undefined,
		{day:"numeric",weekday:"long",month:"long",year:"numeric"})
		.format(new Date())}.`
	document.body.insertBefore(d,document.body.firstChild);
});

script.js

Code:

console.log(d.textContent);

Sur la console, on a :

Citation:

ReferenceError: d is not defined

08/03/2020, 20h08
javatwister
C'est parce que d est défini dans un gestionnaire d'événément; même s'il s'agit de "window", la variable n'est pas considérée comme globale;
dans ce cas précis, soit tu déclares ta variable avant le gestionnaire "load", soit tu créées un objet global dans lequel tu stockes toutes tes variables:
Code:

1 2 3 4 5 const v={ briques: 10000, balle:true, score:0 }
et quand tu as besoin d'une variable, tu appelles v.briques, v.balle, etc.
10/03/2020, 19h18
nadfri2019

J'ai finalement réussi à déclarer mes variables globales en dehors du window.onload, par contre j'ai du mettre mes 2 scripts à la fin de la balise "body".

Sinon quelques une de mes variables étaient soit pas initialisé, ou bien à la valeur null.

En général c'est du à quoi?
11/03/2020, 13h46
javatwister

Si tu définis "d" comme un élément de la page, il faut que cet élément existe au moment où tu l'appelles;
Donc, si tu l'as appelé en dehors de "onload" et avant que l'élément soit chargé, tu provoques une erreur;
11/03/2020, 23h38
nadfri2019

A partir de quel moment on peut savoir quand un élément est chargé ou non?

Et pourquoi l'emplacement du fichier JS à encore une importance (head, fin de body etc...)?
12/03/2020, 09h59
javatwister

Le fichier html est interprété de haut en bas...

Fuseau horaire GMT +2. Il est actuellement 21h28.