javascript 的模块化解决了代码组织混乱、命名冲突和依赖管理的问题。es6 引入了原生模块系统,通过 export 导出模块内容,支持命名导出(如 export { add, subtract })和默认导出(如 export default function)。通过 import 导入模块内容,命名导出可使用 import { add } from 'module',默认导出可用 import greet from 'module',也可导入所有内容为对象:import * as math from 'module'。在浏览器中使用模块需注意:模块必须通过服务器加载,script 标签需设置 type="module",模块作用域为模块级且默认启用严格模式。这些机制提升了代码结构和可维护性,尤其适用于大型项目。

JavaScript 的模块化主要是为了解决代码组织混乱、命名冲突和依赖管理的问题。ES6(ECMAScript 2015)引入了原生的模块系统,使得我们可以用更清晰、标准的方式进行模块的导入和导出。
使用 export 导出模块内容
在 ES6 中,你可以通过 export 关键字把变量、函数、类或对象从一个模块中导出。导出方式有两种:命名导出和默认导出。
命名导出适合多个功能需要被导出的情况。例如:
立即学习“Java免费学习笔记(深入)”;
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
你也可以使用大括号的形式统一导出:
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };默认导出适用于每个模块只导出一个主要功能的情况:
// greeting.js
export default function greet(name) {
console.log(`Hello, ${name}!`);
}使用 import 导入模块内容
要使用其他模块导出的内容,就需要使用 import 语句来导入。
对于命名导出的内容,可以这样导入:
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 输出 8
console.log(subtract(5, 3)); // 输出 2如果你只想导入其中一部分,也可以只写需要的部分:
import { add } from './math.js';而对于默认导出,导入时可以自定义名称:
import greet from './greeting.js';
greet('Alice'); // 输出 Hello, Alice!还有一种方式是将所有导出内容作为一个对象导入:
import * as math from './math.js'; console.log(math.add(2, 3)); // 输出 5
这种方式在调试或不确定具体要用哪些函数时比较方便。
模块文件的使用注意事项
在浏览器中使用 ES6 模块时,需要注意几点:
- 模块文件必须通过服务器加载,不能直接打开本地 HTML 文件运行(否则会因为跨域问题报错)。
- 在
标签中要加上type="module",例如:
- 模块中的变量作用域是模块级别的,不会污染全局作用域。
- 模块默认是严格模式(strict mode),不需要手动开启
'use strict'。
这些细节虽然看起来不起眼,但如果不注意,很容易导致模块无法正常运行或者出现意料之外的行为。
基本上就这些。ES6 模块机制虽然不复杂,但在实际开发中非常实用,特别是在大型项目中能有效提升代码结构和可维护性。










