写点什么

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

用户头像
devpoint
关注
发布于: 2021 年 04 月 22 日
悟透前端:JavaScript ES6模块的导入导出

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


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

什么是 ES6 模块?

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


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


如下代码所示:


<script type="module" src="devpoint.js"></script>
复制代码


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

export / import

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


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


请看下面的示例,在该示例中导出了函数 multipleadd


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.jsexport default 是什么,在这里 multiply 只是一个函数名或者变量名。导入 export default 定义,可以在导入时候使用任何名称。如下的方式也是对的:


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

export default 和 export 区别

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

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

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

总结

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

发布于: 2021 年 04 月 22 日阅读数: 21
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
悟透前端:JavaScript ES6模块的导入导出