{"id":718,"date":"2024-07-30T20:27:30","date_gmt":"2024-07-30T18:27:30","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=718"},"modified":"2024-07-30T20:27:31","modified_gmt":"2024-07-30T18:27:31","slug":"008-modulos-import-export","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/06-objetos-y-funciones-del-lenguaje\/008-modulos-import-export\/","title":{"rendered":"008. M\u00f3dulos (import \/ export)"},"content":{"rendered":"\n

Los m\u00f3dulos<\/strong> en Javascript<\/strong> significa que podemos llamar a los archivos Javascript<\/strong> no s\u00f3lo desde el archivo HTML sino tambi\u00e9n desde un archivo Javascript<\/strong> interno, y esto est\u00e1 ya perfectamente soportado en nuestros navegadores.<\/p>\n\n\n\n\n\n\n\n

Lo ideal es que el c\u00f3digo Javascript<\/strong> est\u00e9 incluido en archivos Javascript<\/strong> independientes.<\/p>\n\n\n\n

Mandar llamar un archivo Javascript<\/h2>\n\n\n\n

Para mandar llamar un archivo Javascript<\/strong>, como recomendaci\u00f3n, salvo que el programador de una librer\u00eda nos diga que invoquemos el script<\/strong> en la cabecera, los archivos Javascript<\/strong> tienen que estar invocados antes del cierre de la etiqueta <\/body><\/em><\/strong> porque el c\u00f3digo Javascript<\/strong> es bloqueante, y si nuestros archivos pesan mucho o son muchos archivos los que estamos llamando en la cabecera, puede ocurrir que el navegador del usuario tarde en cargar el HTML<\/strong> y los estilos.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

...\n<script src=\"js\/modulos.js\"><\/script>\n<\/body>\n...<\/pre>\n\n\n\n
Para que el archivo Javascript<\/strong> tenga la capacidad de llamar internamente a otros archivos Javascript<\/strong>, es muy importante que a la etiqueta de apertura <script><\/em><\/strong> le pongamos un nuevo valor al atributo type<\/em><\/strong>, de la siguiente forma.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<script src=\"js\/modulos.js\" type=\"module\"><\/script><\/pre>\n\n\n\n
Si no tenemos este type<\/em> <\/strong>en la invocaci\u00f3n de nuestra etiqueta <script><\/em><\/strong>, simplemente las importaciones van a mandar error.<\/p>\n\n\n\n
Navegadores antiguos<\/h2>\n\n\n\n
Para navegadores antiguos, podemos incluir otro enlace por si alg\u00fan navegador no soportase importaci\u00f3n de m\u00f3dulos Javascript<\/strong>, con la siguiente sintaxis.<\/p>\n\n\n\n
<script src=\"js\/modulos.j\" type=\"module\"><\/script>\n<script src=\"js\/no-modulos.js\" nomodule><\/script><\/pre>\n\n\n\n
Incluimos un segundo script<\/strong> con el atributo booleano nomodule<\/em><\/strong>, para que, si el navegador no soporte m\u00f3dulos, cargue este segundo archivo en vez del primero.<\/p>\n\n\n\n
Ordenamiento de c\u00f3digo<\/h2>\n\n\n\n
Conviene  recordar que en los primeros cap\u00edtulos del curso, mostr\u00e1bamos el ordenamiento que tiene que tener nuestro c\u00f3digo, el cual es:<\/p>\n\n\n\n
    \n
  • Importaci\u00f3n de m\u00f3dulos<\/li>\n\n\n\n
  • Declaraci\u00f3n de variables<\/li>\n\n\n\n
  • Declaraci\u00f3n de funciones<\/li>\n\n\n\n
  • Ejecuci\u00f3n de c\u00f3digo<\/li>\n<\/ul>\n\n\n\n
    Como podemos ver, lo primero que debemos hacer son las importaciones de m\u00f3dulos<\/strong>.<\/p>\n\n\n\n
    Mandar llamar a archivos Javascript dentro de otros<\/h2>\n\n\n\n
    Vamos a hacer un ejm. Para ello vamos a crear dos archivos, el archivo m\u00f3dulos, que va a contener otros archivos .js<\/em>, y un archivo denominado constantes.js<\/em>, que vamos a exportar al archivo modulos.js<\/em>, y que va a tener la siguiente sintaxis.<\/p>\n\n\n\n
    Ejm archivo constantes.js<\/em><\/strong><\/p>\n\n\n\n
    export const PI = Math.PI;<\/pre>\n\n\n\n
    Y desde el archivo modulos.js<\/em> vamos a mandar llamar a la constante PI<\/strong> <\/em>en el archivo constantes.js<\/em> de la siguiente forma,<\/p>\n\n\n\n
    Ejm archivo modulos.js<\/em><\/strong><\/p>\n\n\n\n
    import {PI} from \".\/constantes.js\";<\/pre>\n\n\n\n
    Muy importante<\/strong>: siempre poner para la importaci\u00f3n el punto y la barra invertida<\/strong> (.\/<\/em><\/strong>), si no dar\u00e1 error. Si tuvi\u00e9semos que subir niveles, hacia una carpeta que est\u00e9 m\u00e1s arriba, por cada nivel habr\u00eda un punto<\/strong> (..\/) por un nivel m\u00e1s arriba. Como en nuestro caso est\u00e1 en la misma carpeta, solo pondremos \u00ab.\/\u00bb.<\/p>\n\n\n\n
    \n
    Muy importante<\/strong>: nuestros archivos siempre tienen que llevar el atributo type=\u00bbmodule\u00bb<\/strong> en la etiqueta <script><\/strong>, si no no funcionar\u00e1n.<\/p>\n<\/blockquote>\n\n\n\n
    Exportar lo que necesitemos<\/h2>\n\n\n\n
    En un archivo .js<\/em> podemos exportar lo que necesitemos, no todo. Si no le incluimos la palabra export<\/em> <\/strong>a nuestra sintaxis, no se exportar\u00e1.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    \/\/ Esta variable s\u00ed se exportar\u00e1\nexport const PI = Math.PI;\n\n\/\/ Estas dos variables no se exportar\u00e1n\nlet usuario = \"Francisco\";\nlet passwd = \"Francisco\";<\/pre>\n\n\n\n
    \n
    Nota<\/strong>: No tenemos que exportar necesariamente todo, tan s\u00f3lo lo que necesitemos.<\/p>\n<\/blockquote>\n\n\n\n
    Exportar funciones<\/h2>\n\n\n\n
    Tambi\u00e9n podemos exportar a manera de objeto, de la siguiente manera. Vamos a exportar operaciones de un archivo denominada aritmetica.js<\/em>.<\/p>\n\n\n\n
    Ejm en archivo aritmetica.js<\/strong><\/p>\n\n\n\n
    export function sumar(a, b) {\n  return a + b;\n}\n\nexport function restar(a, b) {\n  return a - b;\n}<\/pre>\n\n\n\n
    Y ahora importamos en nuestro archivo modulos.js<\/em> como siempre<\/p>\n\n\n\n
    Ejm en archivo modulos.js<\/strong><\/p>\n\n\n\n
    import { PI } from \".\/constantes.js\";\nimport { sumar, restar } from \".\/aritmetica.js\";\n\nconsole.log(\"Archivo modulos.js\");\nconsole.log(PI); \/\/ Imprimir\u00e1 en la consola el n\u00famero PI\nconsole.log(sumar(2,3)); \/\/ Imprimir\u00e1 en la consola 5\nconsole.log(restar(2,3)); \/\/ Impirmir\u00e1 en la consola -3<\/pre>\n\n\n\n
    Devolver todo en un objeto<\/h2>\n\n\n\n
    Las funciones de arriba las vamos a unificar y devolverlas a manera de objeto.<\/p>\n\n\n\n
    Ejm en archivo aritmetica.js<\/strong><\/p>\n\n\n\n
    function sumar(a, b) {\n  return a + b;\n}\n\nfunction restar(a, b) {\n  return a - b;\n}\n\nexport const aritmetica = {\n  sumar,\n  restar,\n};<\/pre>\n\n\n\n
    Y el archivo modulos.js<\/em> quedar\u00eda de la siguiente manera.<\/p>\n\n\n\n
    Ejm en archivo modulos.js<\/strong><\/p>\n\n\n\n
    \/\/ Importamos los archivos\nimport { PI } from \".\/constantes.js\";\nimport { aritmetica } from \".\/aritmetica.js\";\n\n\/\/ Realizamos las operaciones que necesitemos\nconsole.log(\"Archivo modulos.js\");\nconsole.log(PI);\nconsole.log(aritmetica.sumar(2, 3));\nconsole.log(aritmetica.restar(2, 3));<\/pre>\n\n\n\n
    Importar por defecto<\/h2>\n\n\n\n
    Significa que cuando vayamos a llamar ese archivo, es la funci\u00f3n, variable, clase… que por defecto se va a exportar.<\/p>\n\n\n\n
    Para ello escribimos la siguiente sintaxis.<\/p>\n\n\n\n
    Ejm en archivo constantes.js<\/strong><\/p>\n\n\n\n
    export default function saludar() {\n  console.log(\"Hola M\u00f3dulos +ES6\");\n}<\/pre>\n\n\n\n
    La palabra default<\/em> <\/strong>indica que cuando se exporte este archivo, esa funci\u00f3n<\/strong> se exporta autom\u00e1ticamente,<\/p>\n\n\n\n
    Nuestro archivo modulos.js<\/em> quedar\u00eda con la siguiente sintaxis<\/p>\n\n\n\n
    Ejm en archivo modulos.js<\/strong><\/p>\n\n\n\n
    import saludar, { PI } from \".\/constantes.js\";\nimport { aritmetica } from \".\/aritmetica.js\";\n\nconsole.log(\"Archivo modulos.js\");\nconsole.log(PI);\nconsole.log(aritmetica.sumar(2, 3));\nconsole.log(aritmetica.restar(2, 3));\nsaludar();<\/pre>\n\n\n\n
    \n
    Nota<\/strong>: no se pueden tener dos funciones<\/strong>, objetos<\/strong>, variables<\/strong>… exportadas por defecto, tan s\u00f3lo puede haber una por archivo. S\u00f3lamente puede haber una exportaci\u00f3n.<\/p>\n<\/blockquote>\n\n\n\n
    Con export default<\/em><\/strong> ocurre que no podemos utilizar export default<\/em><\/strong> a la vez que declaramos una variable con const<\/em> <\/strong>o let<\/em><\/strong>, dar\u00eda error, habr\u00eda que hacerlo de la siguiente manera.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    let saludo = \"Mi nombre es Francisco\";\nexport default saludo;<\/pre>\n\n\n\n
    Esto ocurre s\u00f3lo en export default<\/em><\/strong> pero no en export<\/em> <\/strong>s\u00f3lo, y ocurre porque en el momento en el que se importe el archivo donde se vaya a hacer la invocaci\u00f3n<\/strong>, carga ese objeto<\/strong>, esa funci\u00f3n<\/strong> por defecto.  Por lo tanto, primero hay que declarar<\/strong> la variable<\/strong> y luego la exportaci\u00f3n de la misma. Solamente las funciones<\/strong> y las clases<\/strong> permiten la exportaci\u00f3n por defecto en el momento en que se est\u00e1n declarando.<\/p>\n\n\n\n
    Por lo tanto:<\/p>\n\n\n\n
      \n
    • Si es constante<\/strong> o variable<\/strong>: primero se hace la declaraci\u00f3n<\/strong>, y despu\u00e9s la exportaci\u00f3n<\/strong>.<\/li>\n\n\n\n
    • Si es funci\u00f3n<\/strong> o clase<\/strong>: se puede exportar por defecto directamente cuando la estamos creando.<\/li>\n<\/ul>\n\n\n\n
      Generar alias<\/h2>\n\n\n\n
      Podemos utilizar un alias para agilizar, de la siguiente forma.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      import { aritmetica as calculos } from \".\/aritmetica.js\"; \/\/ calculos es alias de aritmetica<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Los m\u00f3dulos en Javascript significa que podemos llamar a los archivos Javascript no s\u00f3lo desde el archivo HTML sino tambi\u00e9n desde un…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":697,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-718","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Los m\u00f3dulos en Javascript significa que podemos llamar a los archivos Javascript no s\u00f3lo desde el archivo HTML sino tambi\u00e9n desde un...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/718\/revisions"}],"predecessor-version":[{"id":719,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/718\/revisions\/719"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/697"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}