Tengo dos funciones javascript definidas en una etiqueta <script> normal y una importada dentro de una etiqueta <script type="module"> :
<script type="module"> import { mean } from "./node00.js"; console.log(mean(1,2,3)); // OK -- just to confirm this works fine </script> <script> function xNew(x) { console.log("Calling xNew"); } </script> <span onclick="mean(1,2,3,4)">Hello</span> <span onclick="xNew(5)">It's me.</span> Parece que la función mean dentro del módulo no es accesible para el html, mientras que la función xNew dentro de las etiquetas de script normales sí lo es. ¿Cuál es el alcance y la accesibilidad de estos dos elementos? Y si el module oculta el javascript del html, ¿cuál sería el punto de usarlo?
Por la naturaleza del module , los módulos pueden comunicarse con los módulos solo mediante import y export (sin comunicaciones fuera de los módulos), pero puede agregar eventos en objetos DOM a través de un document o window que se comparte para todos los módulos.
<script type="module"> function sum(a,b) { console.log('Calling sum'); return a+b; } document.getElementById("test-sum").onclick = () => sum(2,3) </script> <script> function xNew(x) { console.log("Calling xNew");} </script> <span id="test-sum">Hello</span> <span onclick="xNew(2)">It's 'a me, mario</span>Parece que una etiqueta de script que tiene el atributo type="module" especifica que debe considerarse como un módulo de Javascript. Puede estar importando otro(s) módulo(s) de Javascript dentro de él y se convierte en un módulo de "nivel superior" para los módulos importados.
Por ejemplo:
// file "module.js" export var someVar = "Some data"; export function someFunc() { return " for output"; } // this has no "export" prefixed hence cannot be used outside this module function someOtherFunction() { return 1; } <script type="module"> import {someVar, someFunc} from './module.js'; // "Some data for output" console.log(someVar + someFunc()); </script>En el ejemplo anterior, el módulo que se crea se importa mediante la declaración de importación.