JavaScript模块化通过export和import实现代码复用，ES6支持命名导出、默认导出及混合导入，需在HTML中添加type="module"，提升项目可维护性。
在现代JavaScript开发中，代码组织是保持项目可维护性和可扩展性的关键。模块系统让开发者能把代码拆分成独立、可复用的文件，通过导出和导入机制实现功能共享。ES6（ECMAScript 2015）引入了原生的模块支持，成为目前主流的模块化方案。
模块的基本概念
一个JavaScript模块就是一个独立的文件，其中的变量、函数或类默认作用域仅限于该文件。只有通过export明确导出的内容，才能被其他文件通过import使用。
模块之间的依赖关系清晰，避免全局命名污染，提升协作效率。
导出（Export）方式
你可以使用多种方式从模块中导出内容：
立即学习“Java免费学习笔记（深入）”；
- 命名导出：一个模块可以有多个命名导出
// mathUtils.js
export function add(a, b) {
return a + b;
}
<p>export const PI = 3.14159;</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11499" title="cn-json-diff"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="cn-json-diff" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11499" title="cn-json-diff">cn-json-diff</a>
<p>比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。</p>
</div>
<a href="/xiazai/skill11499" title="cn-json-diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 也可以集中导出
const subtract = (a, b) => a - b;
export { subtract };</p>- 默认导出：每个模块只能有一个默认导出，适合导出主功能或单个类
// calculator.js
export default function(a, b) {
return a * b;
}
默认导出常用于React组件或工具类模块。
导入（Import）方式
根据导出方式不同，导入语法也有所区别：
- 导入命名导出
// main.js
import { add, PI } from './mathUtils.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14159
- 导入默认导出（可自定义名称）
// main.js import multiply from './calculator.js'; console.log(multiply(4, 5)); // 20
- 混合导入：同时导入默认和命名导出
import multiply, { add, PI } from './utils.js';
- 整体导入：将所有导出内容作为一个对象导入
import * as MathLib from './mathUtils.js'; console.log(MathLib.add(2, 3)); console.log(MathLib.PI);
模块使用注意事项
浏览器中使用模块需注意以下几点：
- HTML中引入模块脚本时，必须添加type="module"属性
<script type="module" src="main.js"></script>
- 模块默认使用严格模式（'use strict'），无需手动声明
- 模块脚本会延迟执行，等DOM解析完成后再运行
- 路径必须是完整文件名（如 ./mathUtils.js），不能省略扩展名（部分打包工具除外）
在Node.js环境中使用ES模块，需要将文件后缀改为.mjs或在package.json中设置"type": "module"。
基本上就这些。掌握好模块的导出与导入，能让代码结构更清晰，逻辑更分明，便于团队协作和长期维护。
