基础
模块思想,尽量静态化的设计使得编译时就能确定模块的依赖关系,以及输入输出的变量。
CommonJS和AMD模块都只能运行时加载,无法在编译时做静态优化;ES6模块是编译时加载,使得静态分析成为可能。
ES6模块本身不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入;
严格模式
ES6模块自动采用严格模式;顶层this
指向undefined
而不是全局对象。
export命令
是模块的对外接口,可以在任何位置,但必须在模块的顶层作用域;使用规则:
export var v1 = 1;
export var v2 = 2;
// or
var v1 = 1;
var v2 = 2;
export {v1, v2};
// or rename them
var v1 = 1;
var v2 = 2;
export {v1 as value1, v2 as value2};
输出函数或类:
function f1() {...};
export {f1}
// or
export function f1() {...};
// or rename
export {f1 as func1};
import命令
用于在一个文件或模块引用另一个模块或其输出的变量/对象等。也必须用在模块的顶层作用域。
语法:
import {v1, v2} from './profile.js';
// or rename
import {v1 as value1, v2 as value2} from './profile.js';
import
语句会提升。因为静态执行,不能使用变量、表达式等需要运行时才能得到值的语法,也不能用在if
结构中。
模块的整体加载
// 只加载模块而不输入任何值
import 'Lodash';
export default
在一个模块中使用export default
输出的值,可以在其他模块引入时直接重命名且不需用大括号。默认输出值在一个模块中最多只能有一个。其后不能跟变量声明语句。
// in other module 'example.js'
export default function() {
// some code
};
// in this module to import it
import func1 from './path/example.js';
export与import复合写法
export {v1, v2} from './path/example.js'
// equals to
import {v1, v2} from './path/example.js'
export {v1, v2}
模块继承
在一个模块中通过通配符引入另一个模块的所有公开变量(不包括export default
的输出值);
export * from 'example.js';
export var v3 = 3;
跨模块常量
使用const
声明变量,与普通变量的输入、输出规则相似;
import()
该函数是import
命令的动态版;
生如夏花般绚烂,死如秋叶般静美