Módulo 2 — Importación de elementos en JavaScript

1. Importación de datos

En JavaScript es posible importar datos (constantes, variables, objetos o listas) definidos en otros archivos, o bien cargarlos desde archivos JSON externos. Esto permite mantener la información organizada y separada de la lógica del programa.

Ejemplo: Importación desde otro archivo JavaScript

Archivo data/recursos.js:

// data/recursos.js
export const personalSanitario = [
  { id: 1, nombre: "Laura Gómez", puesto: "Enfermera" },
  { id: 2, nombre: "Javier Ruiz", puesto: "Médico general" },
  { id: 3, nombre: "María Pérez", puesto: "Técnico de laboratorio" }
];

export const equiposMedicos = [
  { id: "E001", tipo: "Monitor cardíaco", estado: "Operativo" },
  { id: "E002", tipo: "Respirador", estado: "En mantenimiento" }
];

Archivo gestion/mostrarRecursos.js:

// gestion/mostrarRecursos.js
import { personalSanitario, equiposMedicos } from '../data/recursos.js';

console.log("Listado de personal sanitario:");
personalSanitario.forEach(p => {
  console.log(`- ${p.nombre} (${p.puesto})`);
});

console.log("\nListado de equipos médicos:");
equiposMedicos.forEach(e => {
  console.log(`- ${e.tipo} [${e.estado}]`);
});

Salida esperada:

Listado de personal sanitario:
- Laura Gómez (Enfermera)
- Javier Ruiz (Médico general)
- María Pérez (Técnico de laboratorio)

Listado de equipos médicos:
- Monitor cardíaco [Operativo]
- Respirador [En mantenimiento]

Ejemplo: Importación desde un archivo JSON usando fetch()

Cuando los datos están en formato JSON, se pueden cargar de manera dinámica mediante fetch(), lo cual resulta útil para trabajar con información almacenada en servidores o ficheros externos.

Archivo data/materiales.json:

[
  { "id": "M001", "nombre": "Guantes de nitrilo", "stock": 500 },
  { "id": "M002", "nombre": "Mascarillas FFP2", "stock": 1200 },
  { "id": "M003", "nombre": "Batas desechables", "stock": 300 }
]

Archivo gestion/materiales.js:

// gestion/materiales.js
async function cargarMateriales() {
  try {
    const respuesta = await fetch('../data/materiales.json');

    if (!respuesta.ok) {
      throw new Error(`Error al cargar los datos: ${respuesta.status}`);
    }

    const materiales = await respuesta.json();

    console.log("Materiales disponibles:");
    materiales.forEach(m => {
      console.log(`- ${m.nombre}: ${m.stock} unidades`);
    });

  } catch (error) {
    console.error("No se pudieron cargar los materiales:", error.message);
  }
}

cargarMateriales();

Salida esperada:

Materiales disponibles:
- Guantes de nitrilo: 500 unidades
- Mascarillas FFP2: 1200 unidades
- Batas desechables: 300 unidades

Nota: El uso de fetch() requiere ejecutar el código desde un servidor local o remoto. Si el archivo se abre directamente desde el sistema de archivos, el navegador puede bloquear la lectura por motivos de seguridad.

2. Importación de funciones

Las funciones reutilizables pueden definirse en un módulo y compartirse entre distintos archivos mediante export e import. Esto permite mantener el código organizado y evitar duplicaciones.

Ejemplo: Funciones de cálculo y formato

Archivo utils/calculos.js:

// utils/calculos.js
export function calcularPorcentajeUso(total, enUso) {
  return ((enUso / total) * 100).toFixed(1);
}

export function capitalizarTexto(texto) {
  return texto.charAt(0).toUpperCase() + texto.slice(1);
}

Archivo reportes/usoRecursos.js:

// reportes/usoRecursos.js
import { calcularPorcentajeUso, capitalizarTexto } from '../utils/calculos.js';

const totalEquipos = 50;
const equiposEnUso = 38;

console.log(`Porcentaje de uso de equipos: ${calcularPorcentajeUso(totalEquipos, equiposEnUso)}%`);
console.log(`Tipo de recurso: ${capitalizarTexto("equipo médico")}`);

Salida esperada:

Porcentaje de uso de equipos: 76.0%
Tipo de recurso: Equipo médico

3. Importación de clases

Las clases permiten representar entidades del sistema, como empleados, recursos o departamentos. Cada clase puede definirse en su propio archivo y luego importarse donde sea necesario.

Ejemplo: Clase RecursoHumano

Archivo models/RecursoHumano.js:

// models/RecursoHumano.js
export class RecursoHumano {
  constructor(id, nombre, puesto, turno) {
    this.id = id;
    this.nombre = nombre;
    this.puesto = puesto;
    this.turno = turno;
  }

  mostrarFicha() {
    console.log(`RecursoHumano #${this.id}: ${this.nombre} - ${this.puesto} (${this.turno})`);
  }
}

Archivo gestion/personal.js:

// gestion/personal.js
import { RecursoHumano } from '../models/RecursoHumano.js';

const recursoHumano1 = new RecursoHumano(1, "Laura Gómez", "Enfermera", "Turno mañana");
const recursoHumano2 = new RecursoHumano(2, "Javier Ruiz", "Médico general", "Turno noche");

recursoHumano1.mostrarFicha();
recursoHumano2.mostrarFicha();

Salida esperada:

Recurso #1: Laura Gómez - Enfermera (Turno mañana)
Recurso #2: Javier Ruiz - Médico general (Turno noche)

4. Buenas prácticas

• Usar rutas relativas (./ o ../) para importar módulos locales.
• Incluir la extensión .js en las rutas de los módulos.
• Centralizar los datos, funciones y clases en carpetas específicas (/data, /utils, /models).
• Usar export default cuando el módulo exporta un único elemento principal.

Ejemplo de exportación por defecto:

// utils/logger.js
export default function log(mensaje) {
  console.log(`[LOG]: ${mensaje}`);
}

// main.js
import log from './utils/logger.js';
log("Aplicación iniciada correctamente.");