ES6 模块 Modules-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

ES6模块是一种模块化的JavaScript解决方案，其目的是为了解决早期的JavaScript在模块化方面存在的缺陷和不足。ES6模块拥有以下特性：

明确的导出和导入语法

模块的默认导出和命名导出
模块加载时只执行一次，且在第一次加载时就会进行编译和解析，之后每次加载都会使用缓存
支持循环引用

导出和导入
ES6模块使用export关键字进行导出，可以将变量、函数和类等任何JavaScript实体导出：

// 定义一个变量并导出
export const PI = 3.1415926;
// 定义一个函数并导出
export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}
// 定义一个类并导出
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log(`Hi, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

在另一个模块中，可以使用import关键字导入这些模块：

// 导入变量
import { PI } from './math';
// 导入函数
import { sayHello } from './greeting';
// 导入类
import { Person } from './person';

默认导出和命名导出
ES6模块支持默认导出和命名导出两种方式。

默认导出

每个模块都可以有一个默认导出，使用export default关键字进行导出：

// 默认导出一个对象
const config = {
  API_URL: 'https://api.example.com',
  TIMEOUT: 5000,
};
export default config;

在另一个模块中，可以使用import关键字导入默认导出的模块：

// 导入默认导出的模块
import config from './config';
console.log(config.API_URL); // 输出 https://api.example.com

命名导出

除了默认导出，还可以使用命名导出的方式进行导出：

// 命名导出多个变量
export const firstName = 'John';
export const lastName = 'Doe';
export const age = 30;

在另一个模块中，可以使用import关键字导入命名导出的模块：

// 导入多个命名导出的模块
import { firstName, lastName, age } from './person';
console.log(`${firstName} ${lastName}, ${age} years old.`); // 输出 John Doe, 30 years old.

循环引用
在模块化开发中，很容易出现循环引用的情况。ES6模块对循环引用提供了支持，可以在模块中导入其他模块并使用导出的实体，而不必担心循环依赖的问题。

例如，在模块A中导入模块B，并在模块B中导入模块A，这种情况下如果使用旧的模块化方案，会出现循环依赖的问题，导致代码无法正常运行。而使用ES6模块，则可以避免这种问题的出现：

// moduleA.js
import { foo } from './moduleB';
console.log(foo);
// moduleB.js
import { bar } from './moduleA';
export const foo = bar + 1;
export const baz = bar + 2;