简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Utiliser des modules JS dans des fichiers HTML
P粉301523298
P粉301523298 2023-09-07 14:46:07
0
1
555

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粉301523298
P粉301523298

répondre à tous(1)
P粉674876385
P粉6748763852023-09-08 09:35:10 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！