Les modules en JS
2. Définition de module en JS. 1
1. Définition de module
Un « module » est un bloc cohérent de code. Ce bloc contient des fonctionnalités utilisables par d’autres code. Généralement, un module possède son propre fichier.
Les modules aident à produire des applications réutilisables, bien structurées et faciles à maintenir.
2. Définition de module en JS
un module est un fichier JavaScript exportant certains de ses éléments : fonctions, objets, variables, etc.
pour exporter (rendre l’élément du module accessible aux autres) en utilise export et pour importer, on utilise import (pour utiliser un code déjà fournit par un module).
Donc
Les éléments d’un module qu’on veut les
rendre accessible de l’extérieur doivent être précédés de la déclaration export.
Pour utiliser un élémnt déjà fournit par un
autre module, on doit utiliser la déclaration import suivi du nom de l’élément à importer suivi du mot
clef from suivi du
chemin relatif du fichier importé par rapport au
fichier qui l’importe.
3. Exemple
1. On va créer un module nommé module1 et exporter la fonction addone. Cette fonction incrémente un nombre donnée par 1. Le code crée doit être sauvegardé dans un fichier qui porte le même nom du module suivi par js ici (module1.js).
Le code du module1.js est
export function addone(x){
return x+1;
}
Pour utiliser cette fonction par un autre code (script) :
1. On importe le module module1.js en utilisant la syntaxe suivante
import {addone} from './module1.js'
// ici on fait appel à alert(addone(4));
Exemple
Pour utiliser un module dans un fichier HTML on doit préciser qu’on importe un module en rajoutant un attribut type='module' dans notre élément script.
<html>
<head>
<script type='module'>
import {addone} from './module1.js';
window.onload=function(){
document.getElementById("btn").addEventListener('click', ajouter);
}
function ajouter(){
document.getElementById("div1").innerHTML =addone(parseInt(document.getElementById("n").value))
}
</script>
</head>
<body>
test le module, tapez un nombre pour lincrementer par un
<input type=text id=n>
<button id=btn>click</button>
<div id=div1> </div>
</body>
</html>
Note :
Il charger cette page à partir du serveur parce que la majorité des navigateurs bloqueront les imports, comme mesure de sécurité , si vous exécutez ce code localement et sans passer par un serveur pour vous protéger de certaines failles.