Objetivo del post:
Aprender a utilizar los módulos de JS, para poder reorganizar mejor el codigo JS.
Muchas veces nos encontramos ficheros de JS que son enormes, que se hace ilegibles e incluso muchas veces los cargamos en nuestra paginas para utilizar un par de funciones y realmente no necesitaremos todo su código. Este es el motivo de la entrada, el poder cargar partes de código en fichero, o cargar muchos ficheros JS pequeños, se conoce como los módulos JS.
Información que básica sobre módulos en JS:
En mis búsquedas encontré el Canal JONMIRCHA que tiene un curso Javascript super completo y lo explica genial. Al final del mis apuntes os pongo el vídeo donde habla de los módulos de JS.
Antes de empezar debemos saber que la mayoría que de los NAVEGADORES en la actualizad soportan IMPORT y EXPORT, ya que utilizan Javascript ES6, pero aun hay mucha gente que utiliza versiones antiguas e incluso navegadores que ya no tiene soporte como es Internet Explorer que la versión Javascript es anterior al ES6 y soportan IMPORT/ EXPORT.
Lo primero que debemos saber es que para poder utilizar import o export, demos indicarlo con el atributo tipo modulo a la hora cargar el script, por ejemplo:
<script scr="miFichero.js" type="module"><script>
Si no lo ponemos y intentamos hacer un import, no da un error el JS, indicando que debemos añadir type module.
Explicacion de ficheros:
En nuestro ejemplo tenemos:
index.html -> Donde tenemos el html y cargamos el script (miFichero.js)
miFichero.js -> Donde tenemos import cargando el fichero MisModulos.js , que tiene la funciones comunes para toda nuestra web. En miFichero.js tendremos funciones que solo es para nuestro index actual.
misModulos.js -> Es donde tenemos las funciones comunes para toda nuestra web, varias paginas... y estas funciones las tenemos marcar para exportar con export.
Fichero que exportamos JS ( misModulos.js)
Este fichero JS que queremos que sea el modulo, el queremos exportar a otros JS, se lo tenemos indicarle lo que queremos exportar, con export. Esto se puede hacer varia maneras, pero recomiendo hacerlos al final del fichero indicando las funciones y constantes que quieres exporta como indico en a continuación.
misModulos.js
-------------------------------------------
function MiPrimeraFuncion{
....
}
function MiSegundaFuncion{
....
}
function MiTerceraFuncion{
....
}
function MiCuartaFuncion{
....
}
export {MiPrimeraFuncion,MiCuartaFuncion};
El motivo por el que lo hacemos al final, es porque:
Si por cualquier motivo quieres copiar ese fichero para cargarlo normalmente sin tener que ser un modulo, simplemente copia todo el fichero y eliminas las ultimas lineas desde pone exportar y funciona, no tendrías que cambiar nada más. Ver apartado 1 en este mismo post "Intentos del que no sabe" donde explico las pruebas para intentar cargar el mismo fichero sin necesidad de copiarlo.
En fichero que va hacer el import , aquel carga como type=module , tiene que declarar todas las constantes o funciones que vayas utilizar fuera de ese fichero en el objeto WINDOW, porque sino no responde, por ello lo ideal sería encapsular el codigo en objetos.
Intentos del que no sabe
1.- Intentar cargar un fichero con export normal.
Soy cabezón por naturaleza, por eso hago estas pruebas.
En el apartado de "Fichero que exportamos" indico que pongamos el export abajo de todo, porque asi es fácil copiar el fichero y así poder utilizar la copia de nuestras funciones del fichero modulo, pero sin ser modulo. :-)
Esta solución no realmente la mas correcta, pero bueno es un parche, por eso intento una solucion distinta , os pongo en antecedentes:
Tenemos una aplicación que tiene varios años y tenemos JS super espagueti , queremos pasarlo un sistema mas modular, es decir ir fraccionando ese código que utilizamos en módulos, pero lo vamos hacer por partes, poco a poco, no todo del tirón ya es una locura.
Por nos pusimos a buscar mejor opción, a la indicada ( copiar el fichero ) , una opción que nos deje cargar un fichero tipo modulo, que funcione sin tener cargarlo tipo module.
Lo primero que hice es poner un condicional en el export, asi simplemente le podíamos indicar con variable global si lo carga o no, pero no funciona.
Lo siguiente fue utilizar try .. catch que suelo escapar de este tipo instrucciones de control errores, pero la ocasión si era necesario, por lo que siguiendo este post de la web javascript.info en español, lo intento, no funciona.
El motivo esta claro y lo indica en ese mismo post, solo controla los errores de tiempo ejecución, no los errores sintácticos, ya que JS lee el código y luego lo ejecuta, si se produce un error de lectura se denominan "errores de tiempo análisis " son irrecuperables. Aunque pone entre parentisis "desde dentro del código"... me da esperanza que se pueda hacer.. si encuentro algo comento :-)