1 ES6
静态化,编译时就能确认模块的依赖关系
1.1 export命令
规定模块的对外接口,输出的是值的引用。只可用于模块顶层。
- 基本使用
export const a = 20;
- 重命名 –
as
关键字
const fun1 = () => {...}
export { fun1 as Fun1}
1.2 export default
指定模块的默认输出,其他模块加载此模块时,import
命令可以为该匿名函数指定任意名字。
- 基本使用
// foo.js
export default function() {...}
// import.js
import Foo from './foo.js'
- 本质上
export default
命令是输出一个叫做default
的变量或方法
const sum = (x, y) => {
return x + y;
}
export { sum as default };
//等同于 export default sum;
1.3 import命令
输入其他模块提供的功能
输入的变量都是只读的,不可修改
- 导入
export
命令定义的接口
import { fun } from './a.js'
- 导入
export default
命令定义的接口
import a from './a.js'
- 整体加载
import * as API from './a.js'
- 重复加载只会执行一次
import { fun1 } from './a.js'
import { fun2 } from './a.js'
1.4 import()函数
支持动态加载模块,返回一个Promise对象。(异步加载)
import('./foo.js')
适用场合
- 按需加载
- 条件加载
- 动态模块路径
1.5 浏览器加载ES6模块
使用<script>
标签,加入type="module"
属性
<script type="module" src="./foo.js"></script>
异步加载,即等到整个页面渲染完,再执行模块脚本,相当于打开了defer
属性
注意点:
- 代码是在模块作用域中运行,不是在全局作用域运行。模块内部的顶层变量,外部不可见
this
关键字返回undefined