Import dans Export

Un module peut lui-même importer un autre module.

Dans l'exemple on crée une classe InputCompteur qui génère une balise input suivi d'un bouton moins et d'un bouton plus. La classe utilise notre classe Compteur pour augmenter et diminuer la valeur du input. Le changement du champ de saisie met à jour le compteur.

Exemple JS

Méthodeindex.html

1
<script type='module' src='js/app.js'></script>
2
3
<div id='app'></div>
4
5
Méthodejs/app.js
1
import InputCompteur from "./modules/input-compteur.js";
2
3
new InputCompteur(document.querySelector("#app"),1);
4
new InputCompteur(document.querySelector("#app"),5);
5
new InputCompteur(document.querySelector("#app"),10);
Trois nouveaux compteurs sont ajoutés à l'élément app du DOM.
Méthodejs/modules/input-compteur.js
1
import { Compteur } from "./compteur.js";
2
3
export default class InputCompteur {
4
  constructor(elt, step = 1) {
5
    this.elt = elt;
6
    // création du compteur
7
    this.cpt = new Compteur(step);
8
    // création des nouveaux éléments
9
    this.compteur = document.createElement("div");
10
    this.input = document.createElement("input");
11
    this.btnIncr = document.createElement("button");
12
    this.btnDecr = document.createElement("button");
13
    // initialisation des nouveaux éléments
14
    this.input.value = this.cpt.nb;
15
    this.btnIncr.textContent = '+';
16
    this.btnDecr.textContent = '-';
17
    // gestion des événements 
18
    this.btnIncr.addEventListener("click", () => (this.input.value = this.cpt.increment()));
19
    this.btnDecr.addEventListener("click", () => (this.input.value = this.cpt.decrement()));
20
    this.input.addEventListener('change', () => this.cpt.nb = +this.input.value);
21
    // affectation au DOM
22
    this.compteur.append(this.input, this.btnDecr, this.btnIncr);
23
    this.elt.appendChild(this.compteur);
24
  }
25
}
import { Compteur } from "./compteur.js" : l'url est relative au fichier d'import.
Méthodejs/modules/compteur.js
1
export class Compteur {
2
  constructor(step = 1) {
3
    this.nb = 0;
4
    this.step = step;
5
  }
6
  increment() {
7
    this.nb += this.step;
8
    return this.nb;
9
  }
10
11
  decrement() {
12
    this.nb -= this.step;
13
    return this.nb;
14
  }
15
}