ES6 模块

ES6模块是ECMAScript 6引入的一项重要特性，用于在JavaScript中实现模块化开发。ES6模块提供了一种更加现代化和强大的模块化方案，相比于传统的CommonJS和AMD规范，ES6模块具有更好的静态分析、更好的性能和更好的可读性。

以下讲解详细的用法以及案例演示

1、具名导出/导入模块：

具名导出：使用export关键字可以将变量、函数、类等原始名称导出为模块的公共接口

// 导出变量
export const name = 'Alice';

// 导出函数
export function sayHello() {
  console.log('Hello!');
}

// 导出类
export class Person {
  constructor(name) {
    this.name = name;
  }
}

具名导入：源模块中的原始名称导入，应使用import { xxxxx } from 'module.js'语法进行导入

// 导入单个变量
import { name } from './moduleA'; // Alice

// 导入多个内容
import { name, sayHello } from './module.js'; // Alice sayHello() {}

注意：当模块中并没有定义默认导出，然后在导入模块时使用了默认导出语法，而默认导出是通过export default语法导出的，导致返回的是undefined。

// 导入默认导出
import Person from './module.js'; // undefined

2、默认导出/导入

除了可以导出多个内容外，还可以使用export default语法导出模块的默认内容

// moduleC.js
const defaultExport = {
  key: 'value'
};
export default defaultExport;

// 在其他文件中导入
import myModule from './module.js'; // {key: 'value'}

3、名称空间导入

名称空间导入（Namespace Import）：

在ES6模块中，通过import * as xxxxfrom 'module.js'语法来导入一个模块的所有导出内容，将该对象将所有源模块的 named exports 公开为属性和方法（包括默认导出）。

将其存储在一个命名空间对象中。这种导入方式可以方便地将一个模块的所有导出内容组织在一个对象中，以便在代码中使用

// 具名导出
export const name = 'Alice';
// 具名导出
export function sayHello() {
  console.log('Hello!');
}

// 默认导出
export default {
  key: 'value'
};

// 名称空间导入
import * as module from './module.js';
console.log(module);
console.log(module.name); // Alice
console.log(module.sayHello); // sayHello() {}
console.log(module.default); // {key: 'value'}

模块内所有具名导出将作为属性附加到导入的对象上，例如 module.name

当存在默认导出，则可以通过 module.default 访问它

微信截图_20240226172910.png

4、重命名导出/导入

针对具名导入导出，可以使用as关键字对导出和导入的内容进行重命名

导出重命名：

const name = 'Alice';
// 重命名导出
export { name as myName };

// 重命名导入
import { myName } from './module.js'; // Alice

导入重命名：

export const name = 'Alice';
export const age = 18;

// 重命名导入
import { name as myName, age as myAge } from './module.js'; // Alice 18

5、动态导入

ES6模块还支持动态导入，可以在运行时在局部根据需要动态加载模块

返回Module对象，与名称空间导入一致，将一个模块的所有导出内容组织在一个对象中

import('./module.js').then(module => {
  // 使用动态导入模块
});

async function test() {
    // 使用动态导入模块
    const module = await import('./module.js');
}

6、无命名导入

加载模块代码，但不要使任何新对象可用。这种导入方式通常用于执行模块中的副作用，例如模块中的代码会对全局环境产生影响，而不需要直接访问模块导出的内容

import './module.js';
import './styles.css';

ES6 Module模块化 使用方法案例详解