ES Module 与普通脚本对比演示 - 作用域与加载

最核心的区别有三点：
1. 作用域隔离：ES Module 拥有独立的模块作用域，内部声明的变量（包括var）不会泄漏到全局 window 对象；而普通脚本中的 var 声明会直接挂到 window 上。
2. 严格模式：ES Module 自动以严格模式运行（无需手动写 'use strict'），未声明的变量赋值会抛出 ReferenceError。
3. 加载时机：ES Module 默认具有 defer 行为，异步加载且不阻塞HTML解析；普通脚本同步加载，会阻塞页面渲染。

这是 ES Module 规范的设计决策。在模块系统中，顶层 this 被定义为 undefined，目的是防止模块代码意外访问全局对象，增强代码的封装性和安全性。相比之下，普通脚本中顶层 this 指向 window（浏览器环境），容易导致意外的全局状态修改。这一差异也使得模块代码更容易在不同环境（浏览器、Node.js）之间移植。

浏览器对 ES Module 使用模块映射（Module Map）进行缓存。当一个模块 URL 被首次加载后，其导出内容会被缓存。后续任何对相同 URL 的导入（无论是静态 import 还是动态 import()）都会直接返回缓存，不会重新执行模块代码。这意味着：
• 模块内的初始化代码只执行一次
• 多个模块导入同一个URL时共享同一个模块实例
• 普通脚本则没有此缓存机制，每次添加到DOM都会重新执行

可以，但有一定限制。ES Module 可以使用 import 语句导入任何 JavaScript 文件。如果导入的是一个普通脚本（不含 export），该脚本仍会在模块上下文中执行（严格模式、模块作用域），但不会有任何导出内容。通常更好的做法是使用动态导入 import() 来加载普通脚本，或将其改造为 ES Module 格式。

静态 import：在模块顶层使用，语法为 import { foo } from './module.js'，在编译时解析，必须位于模块顶层，不能条件加载。
动态 import()：返回一个 Promise，可以在任何地方调用（包括普通脚本），支持条件加载、懒加载、按需加载。例如：const module = await import('./module.js')。动态导入同样遵循模块缓存规则。

ES Module 在现代浏览器中得到广泛支持（Chrome 61+、Firefox 60+、Safari 11+、Edge 16+）。对于需要兼容旧版浏览器的项目，可以使用 <script nomodule> 提供降级方案，或使用打包工具（如 Webpack、Rollup、esbuild）将模块代码编译为兼容格式。截至2024年，ES Module 的全球浏览器支持率已超过96%。