ES6-三种暴露方式

1.介绍

在ES6中，模块化是通过 export 和 import 关键字来实现的。

ES6提供了三种主要的暴露方式：分别暴露、统一暴露和默认暴露。

1.分别暴露

分别暴露是指在模块中分别导出多个变量或函数。每个变量或函数都使用 export 关键字单独导出。

例如：

// a.js
export let a = 1;
export function fun() {
console.log("你好");
}

在导入时，可以使用解构赋值的方式来引入这些分别暴露的变量或函数：

// index.js
import { a, fun } from './a.js';
console.log(a); // 1
fun(); // 你好

2.统一暴露

统一暴露是指将多个变量或函数统一导出。可以先定义变量或函数，然后使用一个 export 语句统一导出。

例如：

// b.js
let a = 1;
function fun() {
console.log("你好");
}
export { a, fun };

在导入时，同样可以使用解构赋值的方式来引入这些统一暴露的变量或函数：

// index.js
import { a, fun } from './b.js';
console.log(a); // 1
fun(); // 你好

3.默认暴露

默认暴露是指在一个模块中只能有一个默认导出。默认导出的可以是一个变量、函数或对象。使用 export default 关键字来导出。

例如：

// c.js
export default function fun() {
console.log("你好");
}

在导入时，可以直接引入默认暴露的内容，不需要使用解构赋值：

// index.js
import fun from './c.js';
fun(); // 你好

默认暴露也可以导出一个对象：

// d.js
let a = 1;
function fun() {
console.log("你好");
}
export default { a, fun };

在导入时，可以直接使用导入的对象：

// index.js
import obj from './d.js';
console.log(obj.a); // 1
obj.fun(); // 你好

通过以上三种方式，ES6模块系统提供了灵活的导出和导入机制，方便开发者根据需求选择合适的方式进行模块化开发。