UD5工具箱
ES Module和普通Script的核心区别是什么？
ES Module和普通Script的核心区别体现在四个方面。第一，作用域隔离：ES Module的顶层变量限定在模块作用域内，不会污染全局作用域window对象；普通Script的顶层变量自动成为全局变量，挂载到window对象上。第二，this指向：ES Module的顶层this值为undefined；普通Script的顶层this值指向window对象。第三，严格模式：ES Module默认启用严格模式，禁止不安全的语法；普通Script默认非严格模式，需要手动声明"use strict"。第四，模块缓存：ES Module的模块只执行一次并缓存结果，多次导入不会重复执行；普通Script每次加载都会重新执行。这些区别决定了在实际开发中应该优先选择ES Module来组织代码。
为什么ES Module中this的值是undefined？
ES Module中this为undefined的原因在于模块有自己独立的执行上下文。在JavaScript中，this的值由函数或代码的执行上下文决定。普通Script中的顶层代码在全局执行上下文中运行，全局执行上下文的this指向window对象。而ES Module的代码在模块执行上下文中运行，这个上下文与全局上下文是独立的，顶层this没有绑定到任何对象，因此值为undefined。这种设计是有意为之的：如果模块顶层this指向window，那么模块就可以通过this访问和修改全局对象，这会破坏模块的作用域隔离。this为undefined确保了模块与全局环境的完全隔离，是ES Module安全性设计的一部分。
ES Module的模块缓存机制是如何工作的？
ES Module的模块缓存机制确保每个模块只被执行一次。当JavaScript引擎第一次遇到import声明时，它会找到对应的模块文件，执行其中的代码，创建模块的执行上下文，缓存其导出的接口值，并将模块标识符与缓存结果关联起来。当后续的import语句再次请求同一模块时，引擎不会重新执行模块代码，而是直接返回缓存的导出结果。缓存的键是模块的URL，包括完整路径和查询参数，因此不同路径下的同名文件会被视为不同的模块。模块缓存的一个重要含义是模块中的副作用代码只执行一次。如果需要重新执行模块代码，可以使用动态import()结合缓存清除策略。
可以将ES Module文件作为普通Script导入吗？
不能直接将ES Module文件作为普通Script导入。ES Module和普通Script是两种不同的模块加载机制，它们的语法、执行方式和行为特征都有本质区别。HTML中的script标签不带type="module"时加载的是普通Script，带type="module"时加载的是ES Module。你不能在一个普通Script中使用import语法，也不能在一个ES Module中使用require语法。如果需要在同一个项目中混合使用两种模块系统，需要借助构建工具如Webpack、Rollup或Vite来进行转换和打包。对于浏览器原生支持的情况，可以使用动态import()在ES Module中加载其他ES Module，但不能直接导入CommonJS模块。建议新项目统一使用ES Module，在必要时通过构建工具兼容旧的代码库。
动态import()和静态import有什么区别？
动态import()和静态import的主要区别在于加载时机和灵活性。静态import声明必须位于模块顶层，在模块加载时就会同步解析和加载依赖的模块，所有依赖在代码执行前就已经确定，适合明确的、始终需要的依赖关系。动态import()可以在任何JavaScript代码中使用，包括条件语句和函数内部，它返回一个Promise，在运行时异步加载指定的模块，适合按需加载和条件加载的场景。静态import支持树摇优化，因为依赖关系在编译时就能确定；动态import由于依赖关系在运行时才能确定，树摇优化的效果会受到影响。静态import的模块标识符必须是字符串字面量；动态import()的模块标识符可以是变量或表达式。在实际开发中，路由组件的按需加载、大型库的延迟加载等场景通常使用动态import()。
ES Module在浏览器中的兼容性如何？
ES Module在现代浏览器中已获得广泛支持。Chrome 61+、Firefox 60+、Safari 10.1+和Edge 16+都支持ES Module。移动端浏览器方面，iOS Safari 10.1+和Android Chrome 61+也都支持。总体来说，截至2025年，全球超过百分之九十七的浏览器用户使用的浏览器版本都支持ES Module。但需要注意的是，老版本的浏览器如Internet Explorer完全不支持ES Module，如果需要兼容这些环境，需要使用构建工具如Babel和Webpack将ES Module代码转换为兼容的格式。对于需要兼容老浏览器的项目，可以在script标签中同时提供ES Module和传统Script两种版本，通过nomodule属性实现优雅降级。对于新项目，建议直接使用ES Module，配合构建工具处理兼容性问题。
ES Module和CommonJS有什么区别？应该用哪个？
ES Module和CommonJS是JavaScript的两种模块系统，各有特点和适用环境。ES Module是语言标准，使用import/export语法，支持静态分析和树摇优化，作用域隔离严格，浏览器原生支持。CommonJS是Node.js的模块系统，使用require/module.exports语法，同步加载，模块缓存机制不同，主要用于服务端。对于浏览器端的新项目，强烈建议使用ES Module，它有更好的性能优化潜力和未来兼容性。对于Node.js项目，CommonJS仍然是广泛使用的标准，但Node.js也支持ES Module，新项目可以考虑使用ES Module。对于需要同时在浏览器和Node.js中运行的同构代码，ES Module是更好的选择。在使用构建工具如Webpack或Vite的项目中，通常可以自由选择模块系统，因为构建工具会处理最终的输出格式。
如何检测代码中的全局作用域泄漏？
检测全局作用域泄漏有多种方法。最简单的方法是在代码执行前后分别获取window对象的所有属性键，比较两次获取结果的差异。新增的键就是代码执行产生的全局变量。具体实现可以用Object.keys(window)获取属性快照，执行代码后再次获取，然后用Set的差集运算找出新增项。本工具内置的全局泄漏检测功能就采用了这种方法，并将结果以清晰的列表形式展示。在实际开发中，可以使用ESLint的no-global-assign和no-undef等规则在编码阶段检测潜在的全局污染。使用ES Module是避免全局泄漏的根本方法，因为模块作用域天然隔离了顶层变量。如果必须使用普通Script，建议在脚本开头添加"use strict"，这能让未声明的变量赋值直接报错而不是静默创建全局变量。