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

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

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

什么是ES6模块?

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

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

如下代码所示:


使用此 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代码导出和导入到不同的文件中,这有助于将代码分解为更小的粒度文件,提高代码的复用性,从而减少代码代码冗余,也能让代码更简洁。