ES6 | Módulos

Los módulos en JavaScript ayudan a modularizar el código dividiendo el código completo en varios módulos que se pueden importar desde cualquier lugar y, por lo tanto, utilizar. Facilita la reutilización de un fragmento de código, el mantenimiento del código y el código de depuración. Además, evita muchos problemas relacionados con el uso de variables y funciones globales. Anteriormente, los módulos se implementaron a través de varias bibliotecas y marcos externos, pero con ECMAScript2015, se convirtió en una parte implícita de las construcciones de JavaScript.

Exportación de valores: JavaScript por su naturaleza multiparadigma nos permite exportar funciones, objetos, clases y valores primitivos usando la palabra clave export . En JavaScript, las exportaciones pueden ser:

• Exportaciones con nombre: cualquier función, clase o variable exportada mediante la exportación con nombre solo se puede importar con el mismo nombre. Se pueden exportar e importar varias funciones y variables mediante la exportación con nombre.

  Ejemplo:
  archivo productos.mjs:

  // Module products.mjs var numberSale=0; var totalSale=0;    // Export keyword can be specified individually // with functions and variables. export function buy(buyer, item) {     buyer.total=buyer.total+item.price; } export function sell(item) {     totalSale=totalSale+item.price;     numberSale=numberSale+1;     item.quantity=item.quantity-1;     return 0; }    // Export keyword can also be used // with multiple values. export { totalSale, numberSale};

  archivo index.mjs:

  import {total sale, numberSale, buy, sell } from './product.mjs'; let buyer={     name:"GeeksforGeeks",     total:0 }; let item={     name="butter",     price:10,     quantity:100 }; console.log("Total Sale till now = ",totalSale); buy(buyer, item); sell(item); console.log("Total expense of buyer = ",buyer.total); console.log("Quantity of item left = ",item.quantity); console.log("Total Sale till now = ",totalSale);

  Producción:
  

• Exportaciones predeterminadas: todo lo exportado de forma predeterminada se puede importar con cualquier nombre. Se puede exportar un máximo de 1 valor utilizando la exportación predeterminada. Para exportar múltiples valores, uno puede combinarlos en un objeto y luego usar la exportación predeterminada para exportar este objeto.
  Ejemplo:

  // Module secret_ingredient.mjs
  var secretIngredient="Salsa";
  export default secretIngredient;
  

Nota: Ambas exportaciones se pueden combinar dentro de un módulo con un máximo de 1 exportación predeterminada y cualquier cantidad de exportaciones con nombre para hacer una exportación híbrida.

Importación de valores: solo los valores exportados desde un módulo se pueden importar utilizando la palabra clave de importación . Las diversas sintaxis para importar las exportaciones se dan a continuación.

Ejemplos:

• Importación de las exportaciones nombradas:

  import { buy, sell} from './modules/products.mjs';

• Importación de las exportaciones nombradas usando alias:

  import { buy as buyCustomer, sell as sellCustomer} from './modules/products.mjs';

• Importación de la exportación predeterminada:

  import productSecret from './modules/secret_ingredient.mjs';

• Importando todas las exportaciones y creando un nuevo objeto:

  import * as productModule from './modules/products.mjs';

• Importación de exportaciones predeterminadas y con nombre:

  import defaultVal,* from './modules/hybrid.mjs';

Dependencias cíclicas en ES6: ES6 proporciona un sólido soporte para el manejo de dependencias cíclicas . Las dependencias cíclicas ocurren cuando en la string de dependencias algunos módulos importan uno de sus módulos sucesores.

• Ejemplo: Sean U, V, X… son módulos diferentes y la string de dependencias es U->V->X-> . . .->U-> . . . luego hay una dependencia circular que involucra a U.
  CommonJS y otras bibliotecas brindan cierto nivel de soporte para dependencias cíclicas, pero enfrentan un problema con la importación y el uso de exportaciones con nombre desde un módulo dependiente cíclico.
  ES6 aborda este problema al compartir los enlaces a los valores en lugar de los valores en sí, en las exportaciones. Y, una vez que se analiza el módulo dependiente cíclico, al enlace se le asigna un valor adecuado.

  Programa:

  // producer.mjs
  import {consumeInc} from 'consumer.mjs';
  var countP=0;
  export function produceInc()
  {
          countP++;
  }
  
  // consumer.mjs
  import {produceInc} from 'producer.mjs';
  var countC=0;
  export function consumeInc()
  {
          countC++;
  }
  

Módulos en navegadores: los módulos se pueden incluir en el JavaScript del navegador configurando el atributo de tipo para la etiqueta del script como módulo . Los módulos cargados desde una fuente externa utilizando el atributo src se difieren de forma predeterminada, es decir, se cargan en paralelo con HTML. Cada módulo se ejecuta solo la primera vez que se carga.

<tipo de script=”módulo” src=”producto.mjs”></script>

Nota:

• Los módulos importados en JavaScript están automáticamente en modo estricto . Puedes leer más sobre el modo estricto aquí .
• JavaScript también permite la carga dinámica de módulos usando la construcción import() .