ES6模块加载

两种加载方式

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案 非语言层面的标准 只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能 支持编译时静态分析，便于JS引入宏和类型检验 动态绑定

export命令

定义

export

命令用于规定模块的对外接口

输出变量

1.单个输出

//profile.js

exportvarfirstName='Michael';

exportvarlastName='Jackson';

exportvaryear=1958;

2.批量输出

//profile.js

var[code]firstName

=

'Michael';

var[code]lastName

=

'Jackson';

var[code]year

=

1958;

export

{

firstName

,

lastName

,

year

};[/code]3.重命名

var[code]n

=

1;

export

{

nasm

};[/code]

4.动态绑定

export

语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export

var

foo

=

'bar';

setTimeout(()[code]

=>

foo

=

'baz',

500);[/code]上面代码输出变量

foo

，值为

bar

，500毫秒之后变成

baz

。

输出函数

1.单个输出

a)方式一

export

function

multiply(

x

,

y

)

{

return

x

*

y

;

};

b)方式二

function[code]

f()

{}

export

{

f

};[/code]

2.批量输出

function[code]

v1()

{

...

}

function[code]

v2()

{

...

}

export

{v1,v2}

3.重命名

function[code]

v1()

{

...

}

function[code]

v2()

{

...

}

export

{

v1asstreamV1

,

v2asstreamV2

,

v2asstreamLatestVersion

};

重命名后，[code]v2

可以用不同的名字输出两次。

输出类

exportdefault

import命令

定义

使用

export

命令定义了模块的对外接口以后，其他JS文件就可以通过

import

命令加载这个模块（文件）。

导入变量

1.批量导入

import

命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（

profile.js

）对外接口的名称相同。

import

{

firstName

,

lastName

,

year

}

from

'./profile';[/code]2.重命名

import

{

lastNameassurname

}

from

'./profile';[/code]

提升

import

命令具有提升效果，会提升到整个模块的头部，首先执行

foo();

import{foo}from'my_module';

上面的代码不会报错，因为import的执行早于foo的调用。

执行

import

语句会执行所加载的模块，因此可以有下面的写法。

import'lodash';

上面代码仅仅执行lodash模块，但是不输入任何值

小结

1.import命令导入的对象可能是一个变量，也可能是一个函数，或者一个类，要视具体情况而定。

2.import与require的差异较大，最大不要混用。要尽可能的使用import.

more