ES6模块化：导入导出规范详解

ES6 模块化是 JavaScript 的官方模块标准，通过 `import` 和 `export` 关键字实现了静态模块管理，有效解决了早期 JavaScript 脚本依赖混乱和命名冲突等问题。它支持命名导出和默认导出两种方式，命名导出允许一个模块导出多个值，导入时需使用相同的名称或重命名；默认导出则限定每个模块只能有一个，导入时可以使用任意名称。文章将深入解析 ES6 模块化的导入导出规范，包括如何使用 `export` 进行命名导出和默认导出，以及如何使用 `import` 导入并重命名模块成员，同时还会介绍混合导入的使用方法。掌握 ES6 模块化，能显著提升 JavaScript 代码的可维护性和性能，是现代 Web 开发的必备技能。

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 可以从其他模块加载导出的内容。导入方式需与导出方式对应。

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"）。基本上就这些，不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~