ES6之模块

ES6 终于将模块写进了标准,JavaScript 也终于有了自己的模块机制。

ES6的模块自动采用严格模式。

export命令

export 命令用于规定模块的对外接口。JavaScript中,一个 .js 文件就是一个模块。文件内部的所有变量,外部无法获取,如果希望外部能够使用模块内部的变量,就需要使用 export 关键字导出。

1
2
3
// first.js
export const a = 0;
export const b = 1;

上面代码是 first.js 文件,ES6将其视为一个模块,我们使用 export 关键字导出了两个变量。

export 命令还可写成以下形式:

1
2
3
const a = 0;
const b = 1;
export { a, b };

推荐此种写法,清晰明了,提高代码可读性。

通常情况下,expore 关键字导出的变量就是其在模块内部的名字,不过我们可以使用 as 关键字在导出时进行重命名。

1
2
3
4
export {
a as a0,
b as b1
};

关于 export 命令的使用需要注意以下几点:

  1. export 命令规定的是当前模块的对外接口,必须与模块内部的变量建立一一对应关系,也就说我们不能直接使用 export 关键字导出原始值与变量名
  2. export 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于某个块级作用域内,就会报错。

import命令

当使用 export 命令定义了某个模块的对外接口后,我们便可以在其他 .js 文件中使用 import 命令加载这个模块导出的变量。

1
import { a, b } from "./first";

使用 import 命令时,文件名后缀 .js 可以省去。

export 命令类似,我们也可以在导入另一个模块的变量时对其进行重命名:

1
import { a as a0 } from "./frist";

整体加载

除了逐一导入另一模块的各个变量,我们还可以使用整体加载的方式,即使用 * 指定一个对象,将导入的值都加载这个对象上。

1
2
// first.js
export { a, b };

普通加载方式如下:

1
import { a, b } from "./first";

整体加载方式如下:

1
import * as first from "./first";

export default

export default 用于为当前模块指定默认导出,其本质上相当于把要导出的值赋值给一个名为 default 的变量,然后使用 export 命令导出这个 default 变量。这种语法的意义在于,当在另一模块中导入相关值时,无需使用此模块的导出变量名。

1
2
// first.js
export default a;
1
2
3
// second.js
import xxx from "./first"
`

export default 命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此 export default 命令只能使用一次。所以 import 命令后才可不用加大括号,因为只可能对应一个值。


参考