web-dev-qa-db-fra.com

Utiliser les fonctions définies dans le module ES6 directement en html

J'essaie d'accomplir une chose assez simple: j'ai du code sur un fichier de module javascript et je l'importe sur un autre fichier javascript (qui n'exporte rien) et je veux appeler certaines des fonctions définies dans ce fichier à partir du HTML directement.

Voyons un exemple représentatif et minimal de ce qui m'arrive (en fait, j'ai testé le code et donne exactement le même problème que je rencontre avec le vrai, qui n'est pas vraiment beaucoup plus complexe que celui-ci):

  • module.js:

    const mod = () => 'Hello there!';
export { mod };

  • main.js:

    import { mod } from './module.js';

function hello()
{
    console.log(mod());
}

  • main.html:

    <!DOCTYPE html>
<html>
    <head>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </head>

    <body>
        <button name="next-button" onclick="hello()">Obi-Wan abandons the high ground to salute you</button>
    </body>
</html>

Sans le import (et en mettant toutes les définitions de fonction sur un seul .js fichier) Je peux appeler la fonction directement depuis le HTML. Cependant, une fois que j'ai introduit les modules, je ne suis plus en mesure de le faire: il dit simplement que la fonction "hello ()" n'est pas définie.

Je suis complètement nouveau pour les modules ES6 (et pour le javascript frontal en fait), donc je suis pleinement conscient que tout ce que je viens de dire est simplement un manque de connaissances (ou de compréhension), mais j'apprécierais tout commentaire sur ce que je fais mal et comment le résoudre pour que je puisse avoir mon code dans différents fichiers et pouvoir l'utiliser. Merci d'avance à tous!

javascripthtmles6-modules
12
Alejandro de Haro

Chaque module a sa propre portée. Ils ne partagent pas la portée globale comme le font les scripts "normaux". Cela signifie que hello n'est accessible qu'à l'intérieur du main.js module/fichier lui-même.

Si vous souhaitez explicitement créer une variable globale, vous pouvez y parvenir en créant une propriété sur l'objet global, window:

function hello()
{
    console.log(mod());
}
window.hello = hello;

Voir aussi Définir la variable globale dans une fonction JavaScript

Cela dit, il est recommandé d'éviter les variables globales. Au lieu de cela, vous pouvez restructurer le code HTML pour charger les modules après la création du bouton et lier le gestionnaire d'événements via JavaScript:

<!DOCTYPE html>
<html>
    <body>
        <button name="next-button">Obi-Wan abandons the high ground to salute you</button>
        <script type="module" src="module.js"></script>
        <script type="module" src="main.js"></script>
    </body>
</html>

et

import { mod } from './module.js';

function hello()
{
    console.log(mod());
}
document.querySelector('button').addEventListener('click', hello);
2
Felix Kling