ES6模块

简介

ES6模块是ECMAScript 6（ES6）中新增的一种模块系统，用于在JavaScript应用程序中组织和管理代码。它提供了一种优雅且强大的方式来导入和导出函数、对象、类以及其他的JavaScript组件。

ES6模块是以静态方式进行导入和导出，在编译时确定，这使得它更加可靠和高效。它取代了以往的CommonJS和AMD模块化方案，并成为了现代JavaScript开发中的标准。

导出

使用ES6模块，我们可以通过export关键字将函数、对象、类、变量等导出到其他文件中使用。

示例代码：

// 导出一个函数
export function greet(name) {
  return `Hello, ${name}!`;
}

// 导出一个对象
export const person = {
  name: 'Alice',
  age: 25,
};

// 导出一个默认值
export default function() {
  console.log('Default export');
}

导入

使用ES6模块，我们可以通过import关键字导入其他文件中导出的函数、对象、类、变量等。

示例代码：

// 导入一个默认值
import defaultExport from './module';

// 导入多个导出值
import { greet, person } from './module';

// 使用导入的值
console.log(greet(person.name)); // Output: "Hello, Alice!"
console.log(person.age); // Output: 25

命名导出和默认导出

ES6模块可以同时使用命名导出和默认导出。命名导出允许我们导出多个值，并通过花括号进行导入；默认导出则是导出一个默认值，并在导入时不需要使用花括号。

示例代码：

// 导出命名值
export const num1 = 1;
export const num2 = 2;

// 导出默认值
export default function() {
  console.log('Default export');
}

导入命名值和默认值的示例：

// 导入命名值和默认值
import { num1, num2, default as myFunction } from './module';

console.log(num1 + num2); // Output: 3
myFunction(); // Output: "Default export"

动态导入

ES6模块还支持动态导入，在运行时根据条件来加载模块。

示例代码：

// 动态导入
const modulePath = './module.js';
import(modulePath)
  .then(module => {
    console.log(module.default());
  })
  .catch(error => {
    console.error(error);
  });

浏览器支持

目前，大多数现代浏览器都支持使用ES6模块，但是需要在<script>标签中添加type="module"属性来告诉浏览器使用模块方式加载JavaScript文件。

示例代码：

<script type="module" src="main.js"></script>

总结

ES6模块提供了一种现代化、可靠且高效的模块化方案，使得我们可以更好地组织和管理JavaScript代码。它提供了导出和导入的机制，支持命名导出、默认导出，甚至还支持动态导入。鉴于其广泛的浏览器支持，我们可以将ES6模块作为开发JavaScript应用程序的首选模块化方案。