首先,需要明确的一点是:ES6中的import
和export
实现的模块化是编译时加载(或称为静态加载)的,即ES6可以在编译时就完成模块的加载,可以在编译时就确定文件的依赖关系,比CommonJS模块的加载方式效率要高,CommonJS是运行时加载,也就是只有在运行时才能确定依赖关系;因为ES6模块时编译时加载,因此,可以做静态分析
其次,ES6中模块默认是使用严格模式的,即使不在文件中添加"use strict"
二、模块的导出
一个文件就是一个模块,模块内的变量无法被外部所访问,如果希望外部环境可以获取某个变量或函数,必须通过export
命令导出;
注意:
export
导出的是对外的接口
,必须与模块内的变量建立一一对应的关系-
export
可以出现在模块文件的任意位置,只要是模块的顶层就可以,不能将export
放到块级作用域中
2.1导出的形式:export
// 第一种形式
export var first = 1;
// 第二种形式
var second = 2;
export {second};
/// 第三种形式
var third = 3;
export {
third as thirdMethod,
};
// 导出函数
function fn() {}
export { fn }
// 导出函数
export function() {};
错误的形式
// 错误:导出的并不是接口,输出的是1
var first = 1;
export first;
// 错误:导出的是1
export 1;
// 错误:导出的还是一个值,类似于export first
function fn() {}
export fn;
2.2 默认导出: export default
为模块指定默认导出,一个模块中只能有一个export default
命令,export default
其实就是将后面的接口赋值给default
// 第一种形式
var first = 1;
export default first; // 不能使用: export default var first = 1;
// 第二种形式
var second = 2;
export {second as default }; // 等同于:export default second;
// 第三种形式
function fn () {}
export default fn;
// 第四种形式
export default function fn() {}
三、模块导入
3.1 导入形式
// 第一种: 从my-module模块中导入foo和say;
import { foo, say } from 'my-module';
// 第二种:导出默认变量名或函数,以及foo和say
import defaultMethod, {foo, say} from 'my_module'
// 第三种:导出后命名
import { foo as myFoo } from 'my-module';
// 第四种:打出所有
import * as myModule from 'my-module';