ES6的模块化

2024-04-20 09:52:12

ES6模块化是JavaScript的一种组织代码的方式，它允许开发者将代码分割成多个独立的部分（模块），每个模块有自己的作用域和接口，模块之间可以通过导入（import）和导出（export）进行相互引用。

基本语法

导出（Export）

在ES6中，一个模块可以导出多个值，如变量、函数、对象等。这些值可以通过export关键字进行导出。

// 导出变量
export const name = 'ES6 Module';

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

导入（Import）

其他模块可以通过import关键字导入模块导出的值。

// 导入模块
import { name, sayHello } from './module.js';

console.log(name); // 输出 'ES6 Module'
sayHello(); // 输出 'Hello, ES6 Module!'

默认导出和导入

每个模块可以有一个默认导出，使用export default进行导出。默认导出的值可以在导入时使用任意名称。

// module.js
export default function() {
  console.log('This is the default export');
}

// main.js
import myDefaultFunction from './module.js';

myDefaultFunction(); // 输出 'This is the default export'

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

JavaScript

// lib.js
export function func1(){...}
export function func2(){...}

// main.js
import * as lib from './lib.js';

console.log(lib.func1);
console.log(lib.func2);

在上面的代码中，main.js模块加载了lib.js模块的所有导出值，它们都会挂载在lib对象上。

注意事项

import和export命令只能在模块的顶层，不能在代码块（如：if语句、for循环等）中使用。
导入的模块是只读的，不能修改导入的值。

码农公寓