Módulos JavaScript
Módulos JavaScript en el navegador
Los módulos JavaScript son una característica del lenguaje que permite modularizar el código en aplicaciones web, dividiéndolo en piezas más pequeñas y manejables. Los módulos permiten definir funciones, variables y clases en un archivo separado que puede ser importado en otros archivos. Esto hace que el código sea más fácil de mantener y reutilizar, y también evita problemas de colisión de nombres.
En el navegador, los módulos JavaScript se pueden utilizar a través del sistema de módulos ES6 (ECMAScript 6) que se implementa en la mayoría de los navegadores modernos. Para utilizar los módulos, se debe definir un archivo JavaScript como un módulo usando la palabra clave “export” para especificar qué funciones, variables o clases se deben hacer accesibles desde otros módulos, y luego importar el archivo en otro lugar usando la palabra clave “import”.
Ejemplo de importación de jQuery
Para importar jQuery desde un CDN en JavaScript, se puede utilizar la sintaxis de importación de módulos ES6. En este ejemplo, vamos a importar jQuery desde la URL del CDN y crear un elemento span en el DOM y cambiarle sus estilos.
Primero, fijate en la sección HTML del siguiente editor donde :
En este ejemplo, el símbolo “$” se utiliza para hacer referencia a la biblioteca jQuery. Al importarla como un módulo, se asegura que la biblioteca se cargue correctamente antes de que se utilice en el código.
Ahora crearemos un elemento span y cambiándole sus estilos en jQuery
Una vez que hemos importado jQuery como un módulo, podemos utilizar sus funciones y métodos para manipular el DOM y cambiar los estilos de los elementos.
En este ejemplo, primero creamos un nuevo elemento span utilizando la función “$()” de jQuery, y lo añadimos al final del body utilizando el método “appendTo()”. Luego, cambiamos el contenido del span utilizando el método “text()”, y finalmente cambiamos los estilos del span utilizando el método “css()”.