模块是自动运行在严格模式下且没有办法退出运行的JavaScript代码。
注意ES6模块与CommonJS模块完全不同。
区别:
- CommonJS Module是对模块的浅拷贝;ES6 Moudle是对模块的引用,只存只读。可以对Common JS模块重新赋值如
var myPromose = require('./testpromise')
,但不能对ES6 Module赋值。- CommonJS Module在运行时加载
module.exports
属性,ES6 模块是编译时输出接口,这个接口不是对象,而是静态定义。- CommonJS 模块的
require()
是同步加载模块,ES6 模块的import
命令是异步加载,有一个独立的模块依赖的解析阶段。
import和export都是静态关键字。模块的导入和导出有一个重要的限制/原则,必须在在其他语句和函数之外使用,不能动态的通过if语句之类的语法去进行导入导出。
导出语法
可以导出任何该js文件中的变量、函数、类。
定义时导出声明
这种导出方法要求导出的函数或者类声明有名称。
1 | export var color = "red"; |
文件底部导出引用
这种导出方法要求导出的函数或者类有名称。这里导出的不是声明,而是引用。
1 | function multiply(num1, num2){ |
重命名导出
使用as关键字来指定函数在模块外应该被称为什么名称。在导入的时候就需要使用as关键字后面跟着的名称来导入。
1 | function multiply(num1, num2){ |
默认值导出
模块的默认值是指通过default关键字指定的单个变量、函数、或者类,只能为每一个模块设置一个默认的导出值。在某一个模块中多次使用default关键字导出是语法错误。
- 导出匿名函数或类
1 | export default function(num1, num2){ |
以上把function作为默认值导出了,且该函数没有名称,也就是说可以用匿名函数导出了。
为什么可以不给函数命名?因为函数被模块所代表了,因此它需要一个名称。
- 先定义函数或类,在导出为默认值
1 | function multiply(num1, num2){ |
- 使用重命名语法结合as导出默认值
1 | function multiply(num1, num2){ |
经常用于在一条导出语句中同时指定多个导出内容(包括默认导出)。
导出一切
导出该模块中的所有值(包括默认值和所有命名导出值/非默认值),使用*
模式。有可能影响导出内容。
1 | export * from './example.js' |
导入语法
在模块A中导出的功能通过import 关键字在模块B中访问,import语句主要由两部分组成:要导入的标识符,标识符要从哪个模块倒入。
语法解释
import { identifier } from './example.js'
import语句有一个原则,不管在import语句中把一个模块写了多少次,该模块总是执行一次。也就是from './example.js'
总是只执行一次。
原因在于每一条导入模块的代码执行后,实例化过的模块被保存在内存中。只要另一个import语句引用了该模块,就重复使用储存在内存中的实例化的模块。如果整个应用程序中有其他模块也使用了./example.js
,那么这些模块都共同使用内存中的加载过的模块。
需要导入的标识符 { identifier }
关键字import后面的大括号表示从给定模块导入的绑定(binding)。
从哪个模块导入 './example.js'
关键字from表示要从哪个模块导入,其后的字符串指定了该导入模块的路径。
指定路径的字符串需要文件扩展名。原因有二:第一,浏览器使用的路径格式与传给<script>
元素的相同,在script元素中做引用的时候是跟着js扩展的;第二,Node.js基于文件系统前缀区分本地文件和包。例如,example是一个包,但./example.js就是一个本地文件。
指定路径的字符串之前需要包含/
,../
, ./
,目的是更好地兼容多个浏览器和Node.js环境。
导入一或多个绑定
普通的绑定都需要放在花括号中{}。
1 | import {sum} from './example.js' |
导入整个模块/命名空间导入
1 | import * as example from './example.js' |
可以把./example.js
整个模块的模块A都导入进模块B作为单一对象example
使用,整个模块的所有导出都可以作为对象的属性来使用。
这个导入格式也被称为命名空间导入(namespace import),因为./example.js
文件中并不存在example
对象,故而example
是作为example.js文件中所有导出成员的命名空间对象被创建的。
重命名导入
1 | import { mul as numti } from './example.js' |
默认值导入
注意导入默认值是不需要添加花括号,import后面的不带花括号的名称是当前模块B的本地名称sum。
1 | import sum, { color } from './example.js' |
在同时导入默认值和非默认值的时候,需要用逗号将默认的本地名称与大括号包裹的非默认值隔开;且import语句中,默认值必须排在非默认值之前。
- 本文标题:ES6导入导出声明
- 本文作者:徐徐
- 创建时间:2020-12-15 11:12:45
- 本文链接:https://machacroissant.github.io/2020/12/15/import-export-es6/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!