ES6之模块

发表于 | 更新于 | 分类于 |
字数统计 743 | 阅读时长 3

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 命令后才可不用加大括号，因为只可能对应一个值。

参考