Utiliser des modules JS dans des fichiers HTML
Depuis que je convertis mon code Javascript en node.js, je modifie l'ancien code pour l'adapter à ES6, en utilisant "Class< /strong>" et "Module" au lieu de simplement "Function " Composant.
J'ai d'abord mis à jour le côté serveur et tout s'est bien passé. Mais maintenant, j'essaie d'accéder au client et j'ai du mal à convertir l'ancien encodage vers le nouveau.
Dans l'exemple suivant, vous pouvez trouver 2 applets :
L'applet "module" est composée de 2 fichiers : "FooClass.js" et "Foo_mod.html".
Les "composants" incluent "FooComp.js" et "Foo_comp.html".
Les 4 fichiers sont stockés dans le même dossier. Les deux applets devraient afficher un message d'alerte "x = 7", mais pas l'applet "Module", alors que les gens à l'ancienne le font correctement. Cependant, lorsque vous appuyez sur Ctrl+clic sur le nom du fichier js dans VS Code, il n'y a aucun problème pour atteindre le fichier js à partir du code html. Il doit donc y avoir un problème avec mon nouveau code, mais je ne le trouve pas. Si quelqu'un peut m'aider, merci d'avance...
1 - Applet orienté module (ne fonctionne pas) :
FooClass.js :
class Foo {
constructor() {
this.foo = "";
}
cinq (x) { //(real)->real
return x + 5;
}
}
module.exports = Foo;
Foo_mod.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page2</title>
</head>
<body>
<script type="module" src="./FooClass.js"></script>
<script type="text/javascript">
var fx = new Foo();
var x = fx.cinq(2);
alert("x = " + x); // must display "x=7"
</script>
</body>
</html>
2 - Applet de l'ancienne méthode : (fonctionne bien)
FooComp.js
function cinq (x) { //(real)->real
return x + 5;
}
// end of file FooComp.js
Foo_Comp.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FooComp</title>
</head>
<body>
<script type="text/javascript" src="./FooComp.js"></script>
<script type="text/javascript">
var y = 2;
var x = cinq(y);
alert("x = " + x); // must display "x=7"
</script>
</body>
</html>