ES Modules 高级编程关键在于理解其“编译时契约+运行时协作”本质：静态分析确定依赖与导出，运行时执行顶层代码并支持实时绑定、循环依赖延迟解析、动态import按需加载及跨环境兼容策略。
掌握 ES Modules 高级编程模式，关键不在背语法，而在理解加载行为、作用域边界和依赖关系的运行时表现。重点是把模块当作“编译时契约 + 运行时协作”的组合体来用。
吃透静态分析与动态执行的张力
ESM 的 import/export 是编译时静态声明，但模块脚本本身是运行时执行的。这意味着：
- 所有顶层语句（包括 console.log、函数调用、变量赋值）在模块首次被加载时立即执行，哪怕你只 import 了一个函数，整个模块代码都已跑完
- 命名导入（
import { foo } from './a.js'）不触发模块执行 —— 执行发生在模块被首次引入时，不是导入时 - 默认导出和命名导出可共存，但
export default只能有一个；命名导出可重命名、聚合、甚至从其他模块 re-export：export { foo as bar } from './utils.js'
驾驭循环依赖的真实逻辑
ESM 的循环依赖不是报错，而是“部分初始化”：模块会导出一个“实时绑定”的对象，即使内部变量还没赋值完成。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- A 模块 import B，B 又 import A → 浏览器或 Node.js 会先初始化 A 的导出对象（空壳），再执行 B，B 中读取 A 的导出时拿到的是这个未完成的对象
- 利用这一机制可实现“延迟绑定”，比如状态管理中让 store 和 actions 模块互相引用而不卡死
- 避免在模块顶层直接使用对方未定义的值；把实际调用移到函数体内，确保执行时机可控
按需加载与运行时模块解析
动态 import() 是函数，返回 Promise，它让模块加载变成可编程行为：
- 可用于路由懒加载：
const { default: Dashboard } = await import('./pages/Dashboard.js') - 配合
try/catch处理加载失败，比静态 import 更健壮 - 支持表达式路径（非字符串字面量），但构建工具（如 Webpack/Vite）通常要求路径可静态分析，否则无法自动拆包
- 在 Node.js 中需启用
--experimental-import-meta-resolve或使用import.meta.resolve()辅助定位模块
跨环境一致性实践
浏览器和 Node.js 对 ESM 的支持细节不同，高级用法必须兼顾：
- 浏览器中必须用
<script type="module">启用，且路径需带扩展名（./utils.js），不能省略 - Node.js 要么用
.mjs后缀，要么在package.json中设"type": "module"；否则import会报错 - 想同时兼容 CommonJS 和 ESM？可用
exports字段做条件导出："exports": { ".": { "import": "./index.mjs", "require": "./index.cjs" } } - 避免在 ESM 中混用
require()或__dirname—— 它们在纯 ESM 环境不可用，改用import.meta.url+new URL(..., import.meta.url)
