模块功能主要有两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。
export命令
一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。
// export.js
export var firstName = 'UZI';
export var lastName = 'WUZI';
等同如下写法
var firstName = 'UZI';
var lastName = 'WUZI';
export { firstName , lastName };
export命令除了输出变量,还可以输出函数或类(class)
export function add(x,y){
return x + y;
};
可以使用as关键字重命名
function v1() { ... }
function v2() { ... }
export {
v1 as oneV1,
v2 as twoV2,
}
export命令规定的是对外的接口,必须与模块内部的变量简历一一对应关系
// 写法一
export var m = 1;
// 写法二
var m = 1;
export { m };
// 写法三
var n = 1;
export { n as m }
import命令
使用export定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块
// import.js
import { firstName , lastName } from './export.js'
function setName(element) {
element.textContent = fitstName + ' ' + lastName;
}
上面代码的import命令,用于加载export.js文件,并从中输入变量。import命令接收一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须于被导入模块export.js对外接口的名词相同
export default命令
使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。
// export-default.js
export default function foo(){
console.log('foo');
}
// 或者写成
function foo(){
console.log('foo')
};
export default foo;
import 命令可以为该匿名函数指定任意名字
// import-default.js
import customName from './export-default'
customName();
比较默认输出和正常输出
// 第一组
export default function foo(){ // 输出
// ...
}
import foo from 'foo' // 输入
// 第二组
export function foo(){ // 输出
// ...
}
import { foo } from 'foo' // 输入
第一组使用export default,对应的import语句不需要使用大括号;第二组不使用export default,对应的import语句需要使用大括号