recherche

Maison  >  Questions et réponses  >  le corps du texte

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>

P粉301523298P粉301523298447 Il y a quelques jours614

répondre à tous(1)je répondrai

  • P粉674876385

    P粉6748763852023-09-08 09:35:10

    Vous devez modifier FooClass.js 文件以使用 ES6 导出语法而不是 module.exports : 

    export class Foo {
  constructor() {
    this.foo = "";
  }
  cinq(x) {
    return x + 5;
  }
}

    Vous pouvez utiliser import语句导入FooClasse : 

    <script type="module">
    import { Foo } from "./FooClass.js";
    var fx = new Foo();
    var x = fx.cinq(2);
    alert("x = " + x); // should display "x=7"
</script>

    répondre
    0
  • Annulerrépondre