Module 语法

概述

在 ES 6 之前，社区制定了一些模块加载方案，最主要的就是 [CommonJS]() 和 AMD 两种。前者主要用于服务器，后者用于浏览器。ES 6 在语言层面上实现了模块功能，可以取代 [CommonJS]() 和 AMD 规范，成为了通用的模块解决方案。

基本使用

module 主要由 export 和 import 两个命令。export 命令用于规定模块的对外接口，import 命令用于输入其他模块功能。每一个模块都是一个独立文件，文件内的所有变量，外部无法获取，如果希望在外部获取，就必须使用 export 命令进行输出。我们创建一个 export.js 文件，来写 export 相关内容，import.js 作为 import 导入相关内容。

export 命令

先看看 export 命令的写法。

// export.js
export const name = 'hzzzzzzzq';
export const age = 18;
export const height = 1.78;

上面是一种每一个都导出的写法，也可以看一下另外一种写法，使用一起导出的方式。

// export.js
const name = 'hzzzzzzzq';
const age = 18;
const height = 1.78;
export { name, age, height };

两种写法是相同的。当然 export 命令肯定不只是只能导出变量，还可以导出函数或者类。来看看函数导出吧，还是用老朋友 add 来看吧。当然， function 和 class 的输出，必须使用这样的格式。

// export.js
export function add(x, y) {
  return x + y;
}

// 或者
function add(x, y) {
  return x + y;
}
export { add };

在导出的时候，需要注意的是，导出的变量必须与模块内部的变量建立一一对应关系。

import 命令

使用 import 命令导入 export.js 文件，然后打印。

// import.js
import { name, age, height, add } from './export.js';
console.log(name, age, height);
// hzzzzzzzq 18 1.78
console.log(add(1, 2)); // 3

如果想要自己重新命名，在 import 时，要使用 as 关键字，比如我将 add 改为 sum。

import { add as sum } from './export.js';

需要注意的是

import 命令具有提升效果，会提升到整个模块的顶部，首先执行。
import 是静态执行，不可以使用表达式或者变量
多次重复执行同一句 import ，那么只会执行一次，不会多次执行。

console.log(add(1, 2)); // 3
import { add } from './export.js';
import { name } from './export.js'; // 与上一句相同
// 等同于
import { add, name } from './export.js'

import { 'a' + 'dd'} from './export.js'; // 报错

模块的整体加载

导入时，除了一个一个的导入，还有一种整体导入方式，就是使用( * )来指定一个对象。

我们来看看刚刚的全部导入方式。

import * as all from './export.js';

console.log(all.name, all.age, all.height); // hzzzzzzzq 18 1.78
console.log(all.add(1, 2)); // 3

这种方式，模块整体加载所在的那个对象，也就是 all 对象。

export default 命令

导出还有一种 export default 命令，这种导出方式就是指定默认输出。

// export.js
// 例子 类
export default class () { ... }

// 或者
// 例子 函数
export function (x, y) {
  return x + y;
}

这种导出方式，不需要固定的名称，来对应，可以直接使用匿名类或匿名函数，也可以不用匿名，但是导出时，都是可以任意命名。

导入时不需要使用 {} 来包裹，可以直接命名，使用任何名称命名导入。

// 例子 类
import Obj from './export.js';
let obj = new Obj();

// 或者
// 例子 函数
import add from './export.js';
console.log(add(1, 2));

总结

在正常开发当中，最常使用的一些 export 、improt 以及一些 export default 的方法。

hzzzzzzzq / Blog

ES 6 系列 - 12. Module语法 #13