ES6 Module通过import和export实现静态模块化,支持命名导出(可多个)和默认导出(仅一个),提升代码可维护性;命名导出用export关键字,导入时需对应名称或重命名,也可整体导入为命名空间;默认导出使用export default,导入时可自定义名称;混合导入支持同时引入默认和命名成员;模块语句必须位于顶层,现代浏览器和Node.js已原生支持。

ES6 Module 是 JavaScript 官方标准的模块化方案,解决了早期脚本依赖混乱、命名冲突等问题。它通过 import 和 export 语法实现静态模块管理,支持在编译时确定依赖关系,提升代码可维护性和性能。
基本导出(export)
使用 export 关键字可以将变量、函数或类暴露给其他模块使用。支持两种导出方式:命名导出和默认导出。
• 命名导出允许一个模块导出多个值:
export const name = 'Alice';
export function greet() {
return `Hello, ${name}!`;
}
• 也可以在末尾统一导出:
const age = 25;
function sayHi() {
console.log('Hi');
}
export { age, sayHi };
默认导出(export default)
每个模块最多只能有一个 default 导出,通常用于导出模块的主要功能,如一个组件或类。
• 默认导出可以是值、函数、类等:
export default function() {
return 'This is the main function';
}
• 或导出一个类:
class Person {
constructor(name) {
this.name = name;
}
}
export default Person;
导入模块(import)
使用 import 可以从其他模块加载导出的内容。导入方式需与导出方式对应。
立即学习“Java免费学习笔记(深入)”;
• 导入命名导出:
import { name, greet } from './module.js';
• 导入并重命名:
import { name as userName } from './module.js';
• 同时导入多个并整体接收:
import * as utils from './module.js';
// 使用:utils.name, utils.greet()
导入默认导出
默认导出可以用任意名字导入,不需要花括号。
• 导入默认值:
import myFunc from './module.js';
myFunc();
• 混合导入(默认 + 命名):
import myDefault, { name, age } from './module.js';
ES6 模块是静态的,意味着导入导出语句必须位于模块顶层,不能动态写在条件语句中。现代浏览器和 Node.js 都已原生支持 ES6 Module(需设置 type=”module”)。基本上就这些,不复杂但容易忽略细节。
以上就是JavaScript 模块化:ES6 Module 的导入导出规范的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535685.html
微信扫一扫
支付宝扫一扫