泉州模板做网站,济宁网站建设的公司,如何自己用wordpress建网站,网上订货发货网站建设目录
ES6 Module 核心语法
1. export - 导出模块内容
(1) 命名导出 (Named Exports)
(3) 混合导出 (Combining Named and Default)
2. import - 导入模块内容
(1) 导入命名导出
(2) 导入默认导出
(3) 混合导入
3. 动态导入 (import())
重要特性与注意事项
总结 ES6 …目录
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.56636 import 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 BModule 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 开发的必备技能。它让你的代码结构更清晰、更易维护、更易复用并为构建大型复杂应用奠定了坚实的基础。
