Exportation individuelle

Dans notre fichier à exporter, nous allons exporter chaque propriété individuellement.

Méthodeindex.html

N'oubliez pas d'ajouter l'attribut type dans la balise script.

1
<span id='compteur'></span>
2
3
<button id='decrement'>-</button>
4
<button id='increment'>+</button>
5
6
<script type='module' src='js/app.js' ></script>
Méthodejs/modules/compteur.js
1
export let nb = 0;
2
export let step = 1;
3
4
export const increment = () => {
5
  nb += step;
6
  return nb;
7
};
8
9
export const decrement = () => {
10
  nb -= step;
11
  return nb;
12
};
Le terme export permet de signaler les éléments que vous voulez exporter.
Méthodejs/app.js
1
import { increment, decrement, nb, step } from "./modules/compteur.js";
2
3
const compteur = document.querySelector("#compteur");
4
5
compteur.textContent = nb;
6
7
document
8
  .querySelector("#increment")
9
  .addEventListener("click", () => compteur.textContent = increment());
10
11
document
12
  .querySelector("#decrement")
13
  .addEventListener("click", () => compteur.textContent = decrement());
import : Le terme import permet d'indiquer les éléments à importer.
import { ... } : on indique entre accolades les éléments que l'on veut récupérer.
from "./modules/compteur.js" : l'url est relative au fichier d'import. Elle doit commencer par ./ ou ../
Les éléments importés peuvent être utilisés comme si vous les aviez créés dans votre fichier, mais, déclarés comme des constantes.
Tapez step = 2; après l'import et testez votre code.
1
Uncaught TypeError: Assignment to constant variable.
Après avoir suppriméstep= 2; relancez votre script. Tapez dans la console nb et appuyez sur entrée.
Vous n'avez pas accès aux variables de votre script. En effet, votre script est désormais un Module.
La console ne donne accès qu'aux propriétés du scope de l'objet window.
Ajoutez dans votre fichier, après l'import :
1
window.test = step;
Vous venez d'ajouter une propriété test à window. Tapez test dans votre console. Vous avez la valeur 1 qui correspond à la copie de la valeur de step de votre module.