ES6的模块通过export命令规定模块的对外接口,用import命令引入其他模块提供的功能。
然而export命令又有export和export default两种使用形式,来看看他们最主要的区别
export
export可输出变量、函数、类,有如下两种方式
// profile.js
export var firstName = 'upup';
export var lastName = 'dayday';
export var year = 1995;
export function multiply(x, y) {
return x * y;
};
// profile.js
var firstName = 'upup';
var lastName = 'dayday';
var year = 1995;
function multiply(x, y) {
return x * y;
};
export {firstName, lastName, year, multiply};
对于export导出的接口,import需要使用与接口名称相同的变量名来导入,即大括号里面的变量名要与export的接口一致。
import {firstName, lastName, year, multiply} from './profile.js';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
multiply(3,5) //15
export default
对于export导出的模块,import需要知道要加载的变量名或函数名,而使用export default命令,可以为模块指定默认输出,import时可以指定任意名字
//export-default.js
export default function () {
console.log('foo');
}
//或
function foo() {
console.log('foo');
}
export default foo;
使用import导入时,可以为函数任意指定名字,注意import后面不用大括号
// import-default.js
import customName from './export-default';
customName(); // 'foo'
export default命令用于指定模块的默认输出。一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。