JavaScript中AMD和ES6模块的导入导出对比

发布网友发布时间：2024-10-02 15:15

共1个回答

热心网友时间：2024-12-14 17:47

前端开发中，导入导出功能是常见的操作，涉及require、import、exports、mole.exports、export、export default等语法。以下对这些内容进行简要介绍。

import、export、export default属于ES6规范。

import命令在编译过程中执行，即在代码执行前执行。如果路径错误，将在运行前抛错。import不是必须写在js最前面，具有提升效果，会提升到整个模块头部首先执行。import是静态执行的，不能使用表达式和变量，如if和else中使用import，或者根据变量得来的路径。

import可以使用as进行重命名，有多种导入方式。导入方式与导出有关，将在导出部分逐一介绍。

export和export default关联性很大。export是导出，export default是默认导出。一个模块可以有多个export，但只能有一个export default，export default可以与多个export共存。export default为默认导出，导出的是用{}包裹的对象，以键值对形式存在。导出方式不同，导入方式也不同，建议同一项目下使用相同的导入导出方式。

export default解构后就是export。通过两个demo看下export和export default的区别。

export和export default混合使用是支持的，尽管一般不会这么做。通过export和export default导出的在import引入时都支持通过as进行重命名。

require、exports、mole.exports（注意s）属于AMD规范。require是运行时调用，可以运用在代码的任何地方，支持动态引入，路径支持变量。通过require引入是一个赋值过程。

exports与mole.exports：每个文件是一个模块，有自己的作用域。每个模块内部，mole变量代表当前模块。这个变量是一个对象，它的exports属性（即mole.exports）是对外的接口。加载某个模块，其实是加载该模块的mole.exports属性。Node为每个模块提供一个exports变量，指向mole.exports。这等同于在每个模块头部有一行这样的命令。

在ES6中export default导出的是一个对象，在AMD中exports和mole.exports导出的也都是一个对象。所以如果项目代码支持两种规范，可以交叉使用（尽管不建议这么去做）。注意，通过export导出的不一定是一个对象。