JavaScript 模块 (Module) 简介

JavaScript 模块是现代 JavaScript 开发中组织和封装代码的核心机制。以下是模块系统的主要概念和用法：

基本概念

模块是一个独立的 JavaScript 文件，包含特定的功能代码，可以导出(export)供其他模块使用，也可以导入(import)其他模块的功能。

模块语法

导出 (Export)

1. 命名导出 - 可以导出多个值 ```javascript // 导出单个声明 export const name = 'value'; export function func() {}

// 批量导出 const a = 1; const b = 2; export { a, b };

// 导出时重命名 export { a as aliasName };

2. **默认导出** - 每个模块只能有一个默认导出
```javascript
export default function() {}
// 或
const obj = {};
export default obj;

导入 (Import)

1. 导入命名导出

   import { name, func } from './module.js';
   import { a as alias } from './module.js';
   

2. 导入默认导出

   import defaultExport from './module.js';
   

3. 混合导入

   import defaultExport, { namedExport } from './module.js';
   

4. 导入所有内容

   import * as moduleNamespace from './module.js';
   

模块特性

1. 严格模式 - 模块默认在严格模式下运行
2. 作用域隔离 - 模块有独立的作用域，不会污染全局
3. 单例模式 - 模块只会被执行一次，多次导入会共享同一实例
4. 静态分析 - 导入/导出语句必须在顶层，不能动态导入(除非使用动态导入语法)

动态导入

使用 import() 函数实现按需加载：

import('./module.js')
  .then(module => {
    // 使用模块
  })
  .catch(err => {
    // 处理错误
  });

// 或使用 async/await
async function loadModule() {
  const module = await import('./module.js');
}

模块类型

1. ES 模块 - 现代标准，使用 import/export 语法
2. CommonJS - Node.js 传统模块系统，使用 require/module.exports

浏览器中使用

<script type="module" src="main.js"></script>
<!-- 或 -->
<script type="module">
  import { func } from './module.js';
  func();
</script>

模块系统使得 JavaScript 代码更易于组织、维护和重用，是现代前端开发的基石。