悟透前端：JavaScript ES6 模块的导入导出

如今，我们无法想象没有 Javascript 的互联网，有些网站几乎完全使用 Javascript 构建的。为了使 Javascript 更具模块化、简洁性和可维护性，ES6 引入了一种在 Javascript 文件之间轻松共享代码的方法。这涉及使用模块导出文件的一部分以供一个或多个其他文件使用，并在需要的地方导入所需的部分。

在本文中，将通过一些简单且实用的示例来学习 Javascript 中的 ES6 的模块。

什么是 ES6 模块？

模块使我们可以将代码库分成多个文件，以提高可维护性，也避免将所有代码放入一个大文件中。

为了达到这个效果，需要在 HTML 文档中使用一种 module 类型创建脚本。

如下代码所示：

<script type="module" src="devpoint.js"></script>

使用此 type="module" 引入的脚本就可以使用 import 和 export 功能。

export / import

用模块来组织代码，目的是提高代码的复用性，模块的代码通过export对外暴露，对应通过import 就可以引用了。

假设在一个名为index.js的文件中有一个代码块，并且想要在多个不同的文件中使用该特定的代码块。可以通过导出该代码块，然后将其导入其他文件来实现。

请看下面的示例，在该示例中导出了函数 multiple 和 add：

export const multiply = (x, y) => {    return x * y;};
export const add = (x, y) => {    return x + y;};

也可以通过以下示例达到相同的要求：

const multiply = (x, y) => {    return x * y;};const add = (x, y) => {    return x + y;};
export { multiply, add };

至于使用哪种方式组织代码，没有太大的区别，个人偏向第二种代码风格。当然导出不一定是函数，变量也是可以的。下面就来看下导入的代码示例：

import { multiply, add } from "./index";
console.log(multiply(1, 2));console.log(add(1, 2));

加入需要引入的方法比较多的情况，没必要每个方法都写一遍，可以通过下面的方式，做一个统一的入口：

import * as mathHelper from "./index.js";
console.log(mathHelper.multiply(1, 2));console.log(mathHelper.add(1, 2));

export default

仅当从文件中导出一个值或一个功能时，才可以使用 export default，我们把上面的代码稍微改一下：

// 命名函数export default function multiply(x, y) {    return x * y;}
// 匿名函数export default function (x, y) {    return x * y;}

只需使用 import 即可导入上面的函数，导入代码如下：

import multiply from "./index.js";console.log(multiply(1, 2));

从上面我们可以看出区别，导入 export default 定义的函数 multiply 不需要花括号 {} ，无论文件index.js的 export default 是什么，在这里 multiply 只是一个函数名或者变量名。导入 export default 定义，可以在导入时候使用任何名称。如下的方式也是对的：

import multiplyHelper from "./index.js";console.log(multiplyHelper(1, 2));

export default 和 export 区别

• export与export default都可用于导出常量、函数、文件、模块等

• 在一个文件或模块中，export/import可以有多个，export default 只能有一个

• 通过export方式导出的模块，在导入时要加花括号 { } ；而 export default 则不需要加花括号

总结

Javascript 中的 ES6 模块允许将 Javascript 代码导出和导入到不同的文件中，这有助于将代码分解为更小的粒度文件，提高代码的复用性，从而减少代码代码冗余，也能让代码更简洁。