UD5工具箱
变量作用域对比场景
第一个核心演示场景展示ES Module和普通Script在变量作用域方面的关键差异。在左侧的ES Module区域，代码声明了一个顶层变量然后尝试通过window对象访问它。执行结果显示变量不会出现在window对象上，因为ES Module的顶层变量被限定在模块自己的作用域中。在右侧的普通Script区域，同样的代码执行后变量会出现在window对象上，因为普通Script的顶层变量自动成为全局变量。这个场景直观展示了ES Module的作用域隔离特性，帮助开发者理解为什么ES Module能够避免全局变量污染的问题。场景还进一步演示了函数声明和类声明在两种环境下的作用域差异，全面展示模块化对代码组织的影响。
this指向对比场景
第二个核心演示场景展示ES Module和普通Script中顶层this值的差异。在ES Module中，模块顶层的this值为undefined，这是因为模块有自己独立的作用域，不与全局对象关联。在普通Script中，顶层this值指向window对象，因为在非严格模式下顶层代码在全局上下文中执行。这个差异在实际开发中有重要影响，特别是当代码中使用this来引用全局变量或函数时。如果开发者习惯了普通Script的this行为，迁移到ES Module后可能会遇到意外的undefined错误。场景通过清晰的代码和输出对比，帮助开发者建立正确的this指向认知，避免在模块化迁移中踩坑。
严格模式对比场景
第三个核心演示场景展示ES Module默认启用严格模式的特性。在ES Module中，即使没有显式的"use strict"声明，代码也自动运行在严格模式下。场景通过几个典型的严格模式行为来验证这一点：使用未声明的变量会抛出ReferenceError、对只读属性赋值会抛出TypeError、删除不可删除的属性会抛出TypeError。在普通Script中，这些操作在非严格模式下会被静默处理而不抛出错误。场景还演示了严格模式下的其他行为差异，如函数参数不能重名、八进制字面量被禁止等。这个场景帮助开发者理解为什么在ES Module中编写代码时会遇到更多的错误提示，这是严格模式带来的安全保障。
模块缓存对比场景
第四个核心演示场景展示ES Module的模块缓存机制。ES Module的一个重要特性是模块只会在第一次导入时被执行一次，后续的导入操作会直接使用缓存的结果，而不会重新执行模块代码。场景通过一个带有副作用（如修改变量值或打印日志）的模块来演示这个特性：模块在第一次导入时执行了副作用并记录了日志，第二次和第三次导入时副作用不再发生。相比之下，普通Script标签每次在HTML中引入都会重新执行脚本内容。场景通过日志输出的对比清晰展示了两种方式的执行频率差异。理解模块缓存机制对于正确管理副作用和状态非常重要。
自定义测试场景
除了四个预设的核心演示场景，工具还提供自定义测试功能，允许用户编写自己的代码来验证两种模块系统的行为差异。自定义测试区域提供左右两个代码编辑器，分别用于编写ES Module代码和普通Script代码。用户可以输入任意JavaScript代码，工具会分别在两种环境下执行并展示结果。自定义测试功能为开发者提供了灵活的实验平台，可以验证自己对模块系统行为的各种假设和疑问。例如，用户可以测试闭包在两种环境下的行为差异、异步代码的执行差异或者DOM操作的差异。
全局作用域泄漏检测
工具内置的全局作用域泄漏检测功能是一项独特的实用功能。检测原理是在代码执行前后分别对window对象进行快照，比较两次快照的差异来识别新增的全局属性。当普通Script执行后，工具会自动列出所有新增的全局变量和属性，标示出哪些内容泄漏到了全局作用域。对于ES Module，检测结果通常为空，因为模块的顶层变量不会影响全局作用域。这个功能帮助开发者直观理解全局污染的问题，并认识到使用ES Module的必要性。在自定义测试中，泄漏检测同样适用，用户可以看到自己代码中的全局副作用。
输出区域设计
工具的输出区域经过精心设计，以最清晰的方式展示代码执行结果。每个场景的输出区域分为控制台输出和结果摘要两部分。控制台输出按时间顺序显示所有console.log、console.warn和console.error的调用结果，不同类型的输出使用不同颜色区分。结果摘要以结构化的方式展示关键的检测结果，如变量是否存在window对象上、this的指向值、是否抛出错误、模块执行次数等。输出区域支持实时更新，用户修改代码后重新执行时，旧的输出会被清除，新的结果立即显示。清晰的输出设计让用户能够快速定位和理解代码行为的关键信息。
同时执行对比功能
同时执行对比功能允许用户一键触发ES Module和普通Script的代码同时执行。这个功能确保两种代码在完全相同的条件下运行，排除了时间差异对结果的影响。执行过程中，工具会捕获所有输出和错误信息，并在执行完成后同时展示在各自的输出区域。用户可以逐行对比两种代码的执行过程和结果差异，建立对模块系统行为的完整认知。同时执行还支持多次重复执行，用于测试模块缓存等需要多次运行才能观察到的行为。