COMO INCLUIR FICHEROS DESDE JAVASCRIPT

La modularización es un pilar fundamental en el desarrollo moderno de JavaScript. Organizar el código en archivos separados mejora la mantenibilidad, escalabilidad y legibilidad. En este post, se explicará cómo ficheros en JavaScript. Los elementos importados se usan directamente, respetando su scopey las importaciones son de solo lectura, lo que evita modificaciones accidentales.

Conceptos clave

  • export: Define qué variables, funciones o clases se pueden importar desde otros archivos.
  • import: Trae elementos exportados de otro módulo al archivo actual.
  • Tipos de exportación:
    • Nombrada: Exporta múltiples elementos con nombres específicos.
    • Por defecto: Exporta un solo elemento principal por módulo.
El siguiente ejemplo muestra, en dos archivos, la inclusión de ficheros en javascript. Ejemplo:

  • utils.js: Contiene funciones y variables reutilizables.

    // utils.js

// Variables
export const PI = 3.14159;
export const greeting = "¡Hola, mundo!";

// Función para calcular el área de un círculo
export function calculateCircleArea(radius) {
  return PI * radius * radius;
}

// Función para saludar a una persona
export function sayHello(name) {
  return `${greeting} Soy ${name}`;
}

// Exportación por defecto (solo puede haber una por módulo)
export default function defaultFunction() {
  return "Esta es una función por defecto";
}
  • main.js: Usa las exportaciones de utils.js.

    // main.js

// Importaciones nombradas
import { PI, greeting, calculateCircleArea, sayHello } from './utils.js';

// Importación por defecto
import defaultFunction from './utils.js';

// Usando las variables y funciones importadas
console.log("Valor de PI:", PI); // Imprime: Valor de PI: 3.14159
console.log("Saludo:", greeting); // Imprime: Saludo: ¡Hola, mundo!

// Llamando a las funciones
const area = calculateCircleArea(5);
console.log("Área del círculo:", area); // Imprime: Área del círculo: 78.53975

const message = sayHello("Juan");
console.log(message); // Imprime: ¡Hola, mundo! Soy Juan

// Usando la función por defecto
console.log(defaultFunction()); // Imprime: Esta es una función por defecto
Bastaría con incluir este fichero en un html.