ES6模块加载

两种加载方式

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

export命令

定义

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

输出变量

1.       单个输出

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

2.       批量输出

// profile.js

var='Michael';firstName

var='Jackson';lastName

var=1958;year

{,,};exportfirstNamelastNameyear

3.       重命名

var=1;n

{};exportn as m

4. 动态绑定

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

var='bar';exportfoo

setTimeout(()=>='baz',500);foo

上面代码输出变量foo，值为bar，500毫秒以后变成baz。

输出函数

1.       单个输出

a)         方式一

functionmultiply(,){exportxy

return*; xy

};

b)         方式二

functionf(){}

{};exportf

2.       批量输出

functionv1(){...}

functionv2(){...}

{v1,v2}export

3.       重命名

functionv1(){...}

functionv2(){...}

{export

, v1 as streamV1

, v2 as streamV2

 v2 as streamLatestVersion

};

重命名后，能够用不一样的名字输出两次。v2

 

输出类

export default

import命令

定义

使用export命令定义了模块的对外接口之后，其余JS文件就能够经过import命令加载这个模块（文件）。

导入变量

1.       批量导入

命令接受一个对象（用大括号表示），里面指定要从其余模块导入的变量名。大括号里面的变量名，必须与被导入模块（）对外接口的名称相同。importprofile.js

{,,}'./profile';importfirstNamelastNameyearfrom

2.       重命名

{}'./profile';importlastName as surnamefrom

提高

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

foo();

import { foo } from 'my_module';

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

执行

import语句会执行所加载的模块，所以能够有下面的写法。

import 'lodash';

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

小结

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

2.       import与require的差别较大，最大不要混用。要尽量的使用import.

more