ES6使用export和import实现模块化的方法

ES6使用export和import关键字实现模块化是JavaScript中常用的模块化方案之一。在本篇攻略中，我们将通过详细讲解来了解这一方案的具体实现过程。

一、ES6中简单模块化的实现

在ES6中实现模块化，我们需要用到export和import两个关键字。我们可以通过export关键字将模块中需要对外暴露的内容暴露出去，然后在其他的地方通过import关键字引入需要的模块。

1. export的使用

下面是一个简单的示例，我们定义了一个模块utils.js，并使用export将其中的sum函数暴露出去，供其他模块调用。

//utils.js
export function sum(a, b) {
  return a + b;
}

1. import的使用

在另一个模块中，我们可以使用import关键字引入utils.js中的sum函数，并使用它进行计算。

//main.js
import { sum } from "./utils.js";

console.log(sum(1, 2)); // 3

在这个例子中，我们通过import { sum } from "./utils.js"引入了utils.js中暴露出来的sum函数，并在main.js中调用了这个函数。

二、ES6中的默认导出和其它导出

在某些情况下，我们可能只需要在一个模块中向外暴露一个单一的接口，而不是多个接口。ES6允许我们使用默认导出，来只暴露一个默认的接口，而不需要使用{}（花括号）包裹。

另外，在某些情况下，我们可能想要暴露多个接口，但又想在外部使用不同的名称引入这些接口。ES6也提供了这种情况的解决方案，即可以使用as关键字为这些接口指定不同的名称。

1. 默认导出的使用

下面是一个将函数sum(a, b)默认导出的例子。

//utils.js
export default function sum(a, b) {
  return a + b;
}

在另一个模块中，我们可以直接使用import sum from "./utils.js"来引用这个函数。

//main.js
import sum from "./utils.js";

console.log(sum(1, 2)); // 3

1. 其它导出的使用

我们还可以在模块中使用as关键字，将导出的接口重命名为新的名称。例如，我们可以将sum函数重命名为add。

//utils.js
export function sum(a, b) {
  return a + b;
}

export const PI = 3.14;

export { sum as add };

在另一个模块中，我们可以使用as指定引入的名称，以让代码更易读。

//main.js
import { add as sum, PI } from "./utils.js";

console.log(sum(1, 2)); // 3
console.log(PI); // 3.14

三、总结

在ES6中，使用export和import关键字可以轻松实现模块化，这种方式已经被广泛使用。除此之外，ES6还提供了默认导出和其它导出的特性，可以解决一些特殊的使用场景。通过本篇攻略的介绍，相信您已经熟悉了这些特性的使用，希望对您有所帮助。