什么是Module
Module
就是ES6使JavaScript原生支持模块体系,现在一个.js
文件就是一个模块了。既然是模块,Module
的全部操作都是围绕import
和export
两个命令展开的。
export
有了模块,首先就是要约定导出了什么,这时就需要export
命令了:
// profile.js
export var firstName = 'Michael';
export function multiply(x, y) {};
//一次输出多个
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
需要注意的是,如果直接输出变量名是会报错的:
// 报错
export 1;
// 报错
var m = 1;
export m;
// 正确
export var m = 1;
// 正确,建议使用这种形式
var m = 1;
export {m};
另外,export
输出的值是动态绑定的:
// 报错
export 1;
// 报错
var m = 1;
export m;
// 正确
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
500毫秒后输出的变量的值会是baz
。
import
import
命令就是加载export
命令定义的对外接口。import
接受一对大括号,指定要从模块里导入的变量,大括号里面的变量名,必须与模块里的对外接口名称相称:
// main.js,
//./profile里面export了firstName, lastName, year
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
这里.js
路径是可以省略。
import
命令是编译阶段执行的,所以不能使用表达式和变量
// 报错
import { 'f' + 'oo' } from 'my_module';
补一句,import
语句是 Singleton 模式。
export default
当export
的时候,会定义了对外接口,import
的时候也要定义一样的对外接口接收。现在我不想直到输出模块做什么,只管import
就好,这时就要用export default
:
export default function () {
console.log('foo');
}
//这样import的时候就可以不用"{}",也可以随便命名
import customName from './export-default';
customName(); // 'foo'
不过export default
只能使用一次,因为有两个default
,导入的时候就不直到是哪一个了。
使用export default
的同时,其实也能export
其他变量或方法:
import default, { each } from 'lodash';
这里default
就要放在”{ } “外面,其他对外接口就要在”{ } “里面。
as
as
是别名操作,在import
和export
操作中都可以使用:
import { v2 as streamV2} from './profile';
export {v1 as streamV1};
这样import
后的v2
接口就使用streamV2
变量;export
后的v1
变量就使用streamV1
作为对外接口。
*
*
是在加载的时候使用整体加载,不需要一个个列出对外接口。
circle.js
现在有两个对外接口area
和circumference
:
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
使用*
就会整体加载这两个对外接口,并构成一个对象:
import * as circle from './circle';
console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
注意,import
的时候使用了别名构成circle
对象,不然就没地方放方放了。