es6的模块命令分为export命令和import命令,其中export命令用于导出变量,import命令用于引入变量。
1.1
a文件:
export var name = "name";
export var age = 1;
以上a文件中使用export命令导出了name和age变量。下面,将在b文件中使用import命令进行引入
b文件:
import {name,age} from './a.js';
console.log(name) //name
console.log(age) //1
以上b文件中使用import命令引入变量,变量需要放在花括号当中,from关键字后面指定文件的路径。.js后缀可省略。
1.2 第二种更加常用的变量导出的写法
a文件:
var name = "name";
var age = 1;
export {name,age};
即使用花括号包装起要输入的变量。
1.3 使用as关键字重命名
export {name as myName,age as myName};
import {myName,myName} from './a.js';
如上所示,使用as关键字可以对导出的变量进行重命名,对于导入的变量,同样也可以使用as命令
export {name,age};
import {name aas name1,age as age1} from './a.js';
1.4 错误的变量导出方式:
var age = 1;
export age; 错误
export 1; 错误
export var age = 1; 正确
export {age}; 正确
function fn () {}
export fn; 错误
export function fn () {} 正确
export {fn} 正确
1.5 模块导出的变量具有动态性
a文件:
var name = "name";
export {name};
setTimeout(() => name = "age", 1000);
b文件:
import {name} from './a.js';
console.log(name) //name
setTimeout(() => console.log(name),1500) //age
上面代码中,a文件中的变量在导出后被修改了,而b文件中依然能够获取到改变后的值。
1.6 变量导出的位置
变量的导出应该在模块的顶层作用域中。
var name = "name";
function fn () {
export {name} //错误
}
fn()
如上在函数内导出变量,将报错。
1.7 变量提升效果
console.log(name) //name
import {name} from './a.js';
以上代码不会报错。因为import会最先被执行。
1.8、使用*字符引入变量。
使用*字符可以将模块中所有导出的变量导入到指定的变量中。
a文件:
var name = "name";
var age = "age";
var sex = "sex";
export {name,age,sex}
b文件:
import * as varibles from './a.js';
console.log(varibles.name) //name
console.log(varibles.age) //age
console.log(varibles.sex) //sex
需要注意的是,不可对varibles进行修改,否则将报错,如下:
varibles.name = 1; 错误
1.9、export default命令
export default命令与export命令一样用于导出变量。不同的是,export可以使用多次。在导入变量的时候,需要知道输入的变量名称才能进导入,而export default只能使用一次,在导入变量的时候,用户不需要知道模块内部导出的变量名称。
a文件:
var name = "name";
export default name;
b文件:
import varibles from './a.js';
console.log(varibles) //name
可见,export default在导出变量的时候,不需要像export一样使用花括号。在引入变量的时候也一样。
export default命令最大的好处就是不需要知道模块内部导出的变量名是什么,可以直接使用自己定义的变量名。这样就不需要麻烦地去查看文件中导出的变量名了。
需要注意的是,export default后面不能跟声明变量的语句,因为export default命令实质上是输出了一个叫default的变量,然后允许你在引入的时候为这个变量取任意名称。
export default var name = 1; //错误
export default 1; 正确
var name = 1;
export default name; //正确
2.0 同时引入一个模块中使用export default和export导出的变量。
a文件:
var name = "name";
var age = 1;
export default name;
export {age};
b文件:
import varibles, {age} from './a.js';
console.log(age) //1
console.log(varibles) //name
2.1 import和export的复合写法
export {name,age} from 'xxx';
上面的写法等同于:
import {name,age} from 'xxx';
export {name, age};
2.2 整体输出
export * from 'xxx';
2.3 默认接口
export {default} from 'xxx';
2.4 具名接口改为默认接口
export {name as default} from 'xxx';
等同于:
import {name} from 'xxx';
export default name;
2.5 import不可动态加载模块
var path = './' + fileName;
import xxx from path; 错误!
if (true) {
import xxx from 'xxx' 错误!
}
function fn () {
import xxx from xxxx; 错误!
}
执行上面的代码都将报错,因为引擎处理import语句是在编译时,而不是在代码执行的时候,所以这些import语句都毫无意义,会直接报错。如果需要使用动态加载,可以考虑使用node的require方法。而目前有一个提案,提案提供了import()方法让es6的模块功能实现动态加载。