首先,必须明确,一个JS文件就是一个模块。
ES6模块
export命令
- 用于规定模块的对外接口
- 导出内容供其他模块使用,一个模块中,export可以调用多次
必须与模块内部的变量建立一对一的关系,不能直接导出一个值
export写法:
export let a = 1;
let a = 1; export {a};
let a = 1; export {a as b};//更改变量a的名字
- export default 默认导出
用于指定模块的默认输出。
一个模块只能有一个默认输出,因此export default命令只能使用一次,所以import和export后面不用加{}花括号
export default写法:
- 导出一个匿名函数
export default function(){}
- 导出一个字符串
export default 'hello';
- 导出一个变量
let m = 1; export default m;
- 导出一条语句
export default let m = 1;
import命令
- 用于导入其他模块提供的功能
- 其他JS文件通过import命令加载这个模板
import写法:
- 解构导入
import {a, b, test} from './module';
- 重命名变量
import {a as b} from './module';
- 重复导入
import {a} from './module';
import {b} from './module';
如果多次重复执行同一句import语句,那么只会执行一次模块代码。 - 模块的整体加载 包括默认导出的数据,export default属性名为’default’
import * as obj from './module';
- 默认模块的导入
import test from './module';
export和import的复合写法
如果在一个模块中,先导入和后导出都是同一个模块,import语句和export语句可以写在一起
export { foo, bar } from 'my_module';
等同于
import {foo, bar} from 'my_module';
export {foo, bar};