export命令
模块功能主要由两个命令构成:export
和import
。
-
export
命令用于用户自定义模块,规定对外接口; -
import
命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。
ES6允许将独立的JS文件作为模块,允许一个JavaScript脚本文件调用另一个脚本文件。
现有profile.js
文件,保存了用户信息。ES6将其视为一个模块,里面用export命令对外部输出了三个变量。
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
import
命令就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
如果想为输入的变量重新
取一个名字,import语句中要使用as
关键字,将输入的变量重命名。
import { lastName as surname } from './profile';
//注意:浏览器测试为:
import { firstName, lastName, year } from './module/profile.js';
console.log(firstName);
export default命令
为加载模块指定默认输出,使用export default
命令。
// export-default.js文件
export default function () {
document.write('foo');
}
上面代码是一个模块文件·export-default.js·,它的默认输出是一个函数。
其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面代码的import
命令,可以用任意名称
指向export-default.js
输出的方法。需要注意的是,这时import命令后面,不使用大括号
。