网站制作新技术seo网站排名优化案例
目录
ES6 Module 核心语法
1. export - 导出模块内容
(1) 命名导出 (Named Exports)
(3) 混合导出 (Combining Named and Default)
2. import - 导入模块内容
(1) 导入命名导出
(2) 导入默认导出
(3) 混合导入
3. 动态导入 (import())
重要特性与注意事项
总结
ES6 Module 核心语法
ES6 Module 的核心围绕两个关键字：export 和 import。
1. export - 导出模块内容
一个模块就是一个独立的文件。文件内部定义的变量、函数、类等，默认对外是不可见的。要使其能被其他模块使用，必须使用 export 显式导出。
(1) 命名导出 (Named Exports)
-
方式一：在声明前直接添加
export// module.js (utils 模块) export const PI = 3.14159; // 导出常量 export function double(x) { // 导出函数return x * 2; } export class Person { // 导出类constructor(name) {this.name = name;} } // 未导出的变量是模块私有的 const privateVar = 'secret';方式二：在文件末尾统一导出
// module.js const PI = 3.14159; function double(x) { return x * 2; } class Person { ... }// 使用 export { ... } 语法统一导出 export { PI, double, Person }; // 也可以在导出时重命名：export { PI as CircleRatio, double } -
特点：
-
一个模块可以有多个命名导出。
-
导入时必须使用完全相同的名称（或用
as重命名）。 -
是模块的主要导出方式，明确导出哪些接口。
-
-
语法： 使用
export default// logger.js export default function(message) {console.log(`[INFO] ${message}`); } // 或者先定义，再导出 // function log(message) { ... } // export default log;
// config.js
const appConfig = {apiUrl: 'https://api.example.com',env: 'production'
};
export default appConfig;
-
特点：
-
一个模块只能有一个
export default。 -
导出的是一个值（可以是函数、类、对象、原始值等），而不是名字。
-
导入时可以任意命名（后面会讲到）。
-
常用于导出模块的主要功能、单例对象或值。
-
(3) 混合导出 (Combining Named and Default)
可以在一个模块中同时使用命名导出和默认导出。
// mathUtils.js
export const PI = 3.14159; // 命名导出
export function square(x) { return x * x; } // 命名导出
export default function(x) { // 默认导出 (一个计算圆面积的函数)return PI * square(x);
}2. import - 导入模块内容
要从其他模块使用导出的功能，必须使用 import 语句导入它们。
(1) 导入命名导出
-
基本语法：
import { identifier1, identifier2, ... } from 'module-path';// main.js import { PI, double, Person } from './module.js'; // 导入特定的命名导出console.log(PI); // 3.14159 console.log(double(5)); // 10 const john = new Person('John');导入时重命名 (使用
as):import { PI as CircleRatio, double as multiplyByTwo } from './module.js'; console.log(CircleRatio); console.log(multiplyByTwo(3));导入整个模块对象 (Namespace Import):
使用* as namespace将模块的所有命名导出收集到一个命名空间对象上。默认导出 (export default) 不包含在此对象中！import * as utils from './module.js';console.log(utils.PI); console.log(utils.double(7)); const mary = new utils.Person('Mary'); // utils.default 是 undefined (除非该模块有 export default)(2) 导入默认导出
-
基本语法：
import anyName from 'module-path';(可以任意命名)// app.js import myLogger from './logger.js'; // 导入默认导出，命名为 myLogger import config from './config.js'; // 导入默认导出，命名为 configmyLogger('Application started!'); console.log(config.apiUrl);(3) 混合导入
可以同时导入一个模块的默认导出和命名导出。
-
语法：
import defaultExport, { namedExport1, namedExport2, ... } from 'module-path';或import defaultExport, * as namespace from 'module-path';// appMath.js import calcArea, { PI, square } from './mathUtils.js'; // 导入默认导出和命名导出console.log(PI); console.log(square(4)); // 16 console.log(calcArea(2)); // 3.14159 * 4 ≈ 12.56636import calcArea, * as math from './mathUtils.js'; // 导入默认导出和所有命名导出(作为math对象) console.log(math.PI); console.log(math.square(3));
3. 动态导入 (import())
import 语句是静态的，必须在模块顶层使用。ES2020 引入了动态导入函数 import()，它返回一个 Promise，在需要时（如按需加载、条件加载）异步加载模块。
// 按需加载一个模块
button.addEventListener('click', async () => {try {const module = await import('./dynamicModule.js'); // 返回一个包含导出的对象module.doSomethingAwesome();} catch (error) {console.error('Module loading failed:', error);}
});// 条件加载
if (userNeedsAdvancedFeature) {import('./advancedFeature.js').then(advancedModule => {advancedModule.init();}).catch(err => { ... });
}特点：
-
返回 Promise，可以使用
then/catch或async/await处理。 -
加载的模块的所有导出（包括
default）都作为返回对象的属性。访问默认导出需要使用.default属性。 -
是代码分割（Code Splitting）和优化加载性能的关键技术。
重要特性与注意事项
-
严格模式： ES6 模块自动处于严格模式 (
'use strict')，无需手动声明。 -
只读视图： 通过
import导入的绑定是只读的（常量）。你不能直接修改导入的变量（如果是原始值）或重新赋值导入的变量（如果是对象，可以修改其属性，但不建议这样做，破坏了模块的封装性）。 -
单例： 同一个模块被多次导入时，只会被执行一次，导出的实例是同一个（单例）。
-
静态结构：
-
import和export语句必须位于模块的顶层作用域（不能在if、函数等块级作用域内）。 -
模块路径（
'module-path'）必须是字符串字面量（不能是变量或表达式）。 -
这使得引擎和打包工具（如 Webpack, Rollup, Vite）能在编译/构建阶段就确定所有依赖关系，进行静态分析和优化（Tree Shaking）。
-
-
循环依赖： ES6 Module 支持循环依赖（Module A 导入 Module B，Module B 也导入 Module A），但需要小心设计，避免在模块初始化阶段相互访问尚未完成初始化的值。引擎的处理机制能保证模块至少先完成声明（提升），但赋值可能还未完成。
-
文件扩展名与路径：
-
在浏览器中，模块路径通常需要完整的 URL 或相对路径（
.js扩展名通常需要显式写出）。 -
在 Node.js 和打包工具中，规则更灵活（可能支持省略
.js，解析node_modules等），具体遵循工具或环境的模块解析策略。 -
使用打包工具时，路径别名（alias）是常见配置。
-
总结
ES6 Module 提供了一套强大、标准化的 JavaScript 模块化方案：
-
export: 用于导出模块的功能（命名导出export { ... }/ 默认导出export default）。 -
import: 用于导入其他模块的功能（按名称导入import { ... }/ 导入默认import .../ 命名空间导入import * as ...）。 -
import(): 用于动态、异步加载模块。 -
核心优势： 依赖清晰、作用域隔离、支持静态分析优化（Tree Shaking）、语言原生支持、浏览器和 Node.js 统一。
-
实践建议： 优先使用命名导出以明确接口，默认导出用于模块的“主要功能”；利用打包工具处理兼容性和优化；善用动态导入提升应用性能。
掌握 ES6 Module 语法是现代 JavaScript 开发的必备技能。它让你的代码结构更清晰、更易维护、更易复用，并为构建大型复杂应用奠定了坚实的基础。