JavaScript
Explica los live bindings de ESM, el orden de enlace y evaluación, y los riesgos de dependencias circulares entre módulos JavaScript.
Los módulos se procesan en fases conceptuales: resolver dependencias, crear enlaces entre bindings y evaluar el código.
parsear
↓
resolver grafo
↓
instanciar y enlazar
↓
evaluar dependencias
↓
evaluar importador// counter.js
export let count = 0;
export function increment() {
count++;
}// app.js
import { count, increment } from "./counter.js";
console.log(count); // 0
increment();
console.log(count); // 1count es un live binding que consulta el binding exportado.
count = 99;El binding importado es inmutable desde el importador. Esto no vuelve inmutable un objeto exportado.
export const settings = {
theme: "dark",
};Un consumidor podría mutar settings.theme si la API expone ese objeto mutable.
// a.js
import "./b.js";
console.log("A");// b.js
console.log("B");B se evalúa antes del cuerpo de A.
import "./setup.js";
import "./setup.js";La misma identidad de módulo no se evalúa dos veces. Diferentes URLs o resoluciones pueden representar identidades distintas.
A importa B
B importa ALos ciclos no son automáticamente inválidos. El sistema crea bindings para el grafo antes de evaluar, pero el orden de acceso importa.
// a.js
import { valueB } from "./b.js";
export const valueA = valueB + 1;// b.js
import { valueA } from "./a.js";
export const valueB = valueA + 1;Una evaluación puede intentar leer un binding todavía en TDZ y lanzar ReferenceError.
Las declaraciones de función pueden estar inicializadas antes que ciertos valores, haciendo que algunos ciclos parezcan funcionar.
export function execute() {}No dependas de detalles frágiles de orden. Un ciclo suele indicar que los límites necesitan revisión.
// index.js
export * from "./user.js";
export * from "./orders.js";Importar desde el barrel dentro de los mismos módulos puede crear un ciclo invisible.
// user.js
import { createOrder } from "./index.js";Dentro de una carpeta, importa directamente la dependencia concreta cuando el barrel está destinado a consumidores externos.
export const registry = new Map();
registerFeatures(registry);Si otro módulo accede durante un ciclo, puede observar un estado anterior a completar la inicialización.
Un módulo con top-level await vuelve asíncrona su evaluación. Sus importadores esperan a que termine.
En ciclos asíncronos, una dependencia puede bloquear el progreso del grafo o propagar un rechazo a módulos padres.
Módulos con efectos durante evaluación hacen más importante el orden y más difícil el testing.
connectDatabase();
registerHandlers();Prefiere:
export function initialize() {
connectDatabase();
registerHandlers();
}La capa de entrada controla cuándo sucede.
Antes:
orders → notifications
notifications → ordersDespués:
export function createOrderService({ notify }) {
return {
async complete(order) {
const completed = completeOrder(order);
await notify(completed);
return completed;
},
};
}La implementación de notificación se inyecta desde una capa superior y desaparece el ciclo.
¿Por qué un objeto importado puede mutarse aunque el binding importado sea de solo lectura?
Porque la restricción impide reasignar el binding local, pero no cambia la mutabilidad del objeto al que ese binding apunta.
Import dinámico y top-level await cubre carga bajo demanda y evaluación asíncrona de módulos.