1. JavaScript模块作用域
- 特点：在JavaScript模块中，每个模块都有自己独立的作用域。模块顶层的变量、函数等不会污染全局作用域，只有通过
export导出的内容才能被其他模块访问。例如，在一个module.js文件中定义的变量let localVar = 'test';，在该模块外部无法直接访问localVar。
2. 变量提升
- 传统JavaScript中的变量提升：在ES6之前，JavaScript存在变量提升现象。对于
var声明的变量，会被提升到函数作用域或全局作用域的顶部，但值为undefined。例如：
console.log(a); // undefined
var a = 1;
- 块级作用域与变量提升：ES6引入了
let和const，它们具有块级作用域，不存在变量提升到外层作用域的情况。但是，在块级作用域内部存在暂时性死区（TDZ）。例如：
{
console.log(b); // ReferenceError: b is not defined
let b = 2;
}
3. ES6的import/export机制
import：
- 引入模块内容：用于从其他模块导入变量、函数、类等。例如，
import { myFunction } from './utils.js';从utils.js模块中导入myFunction。
- 与变量提升的关系：
import命令具有提升效果，它会提升到模块的顶部，无论在模块中的何处使用。例如：
myFunction(); // 正常调用，myFunction已被提升
import { myFunction } from './utils.js';
- **与模块作用域的交互**：导入的内容在当前模块作用域内可用，遵循当前模块的作用域规则。例如，导入的变量不会与当前模块内同名的局部变量冲突，因为它们处于同一模块作用域但不同的命名空间分支。
export：
- 导出模块内容：用于将模块内的变量、函数、类等暴露给其他模块。有两种常见的导出方式，命名导出（
export const myVar = 'value';）和默认导出（export default function () {}）。
- 变量提升表现：导出的变量遵循模块内部的变量声明和提升规则。例如，如果是
var声明后导出，依然会有变量提升特性；如果是let或const声明后导出，就遵循块级作用域及TDZ规则。在不同模块环境下，导出变量的提升表现取决于导入模块对其的使用方式，由于import的提升特性，在导入模块中可以在import语句之后直接使用导出的变量。
4. 结合实际项目场景优化代码结构与性能
- 优化代码结构：
- 模块化拆分：利用模块作用域和
import/export机制，将大型项目拆分成多个小模块。例如，在一个Web应用中，将用户认证相关的逻辑放在auth.js模块，将数据请求相关逻辑放在api.js模块。通过export导出功能函数，在其他模块通过import导入使用，使代码结构清晰，易于维护。
- 避免命名冲突：模块作用域的独立性以及
import引入特定命名空间的特性，避免了不同模块间同名变量或函数的冲突。例如，在不同模块中都可以定义名为config的变量，因为它们处于不同的模块作用域。
- 优化性能：
- 按需加载：现代JavaScript打包工具（如Webpack）可以利用
import()动态导入模块，实现按需加载。例如，在一个单页应用中，某些功能模块（如报表生成模块）在用户点击特定按钮时才需要加载。可以这样写：
document.getElementById('reportButton').addEventListener('click', async () => {
const { generateReport } = await import('./report.js');
generateReport();
});
- **减少全局变量使用**：通过模块作用域和`import/export`机制，减少全局变量的声明，降低内存占用和命名冲突风险，从而提升性能。例如，将原本全局定义的配置对象放在一个模块中通过`export`导出，在其他模块通过`import`导入使用。
