ES6模块加载

Posted 2020-08-17 itly

两种加载方式

加载方式

规范

命令

特点

运行时加载

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 firstName = \'Michael\';

var lastName = \'Jackson\';

var year = 1958;

export {firstName, lastName, year};

3.       重命名

var n = 1;

export {n as m};

4. 动态绑定

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

export var foo = \'bar\';

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

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

输出函数

1.       单个输出

a)         方式一

export function multiply(x, y) {

 return x * y;

};

b)         方式二

function f() {}

export {f};

 

2.       批量输出

function v1() { ... }

function v2() { ... }

export {v1,v2}

3.       重命名

function v1() { ... }

function v2() { ... }

export {

 v1 as streamV1,

 v2 as streamV2,

 v2 as streamLatestVersion

};

重命名后，v2可以用不同的名字输出两次。

 

输出类

export default

import命令

定义

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

导入变量

1.       批量导入

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

 import {firstName, lastName, year} from \'./profile\';

2.       重命名

import { lastName as surname } from \'./profile\';

提升

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

foo();

import { foo } from \'my_module\';

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

执行

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

import \'lodash\';

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

小结

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

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

 

来自为知笔记(Wiz)