ES6——Module

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

ES6中的模块（Module）就是一个文件，该文件内部中的变量和方法功都是不对外的，也就是外部无法获取，当然，模块也提供了对外的功能。模块主要是由导入（import）和导出（export）两个功能，其中export命令是用来导出模块中的变量或方法，import命令是用来导入其他模块中提供的功能。下面我们来详细看下这两个命令的使用。

export命令

如果希望其他模块能够读取本文件中的变量或方法，就可以使用export将其导出，如下：

// util.js
export const code = '200';

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

如上，我们在util.js文件中，使用export命令将一个常量code和一个add函数进行导出，这样在其他文件中就可以使用，如果文件中需要导出的功能比较多，可以使用下面的写法：

// util.js
const code = '200';
function add(x, y) {
    return x + y;
};
export { code, add };

如上示例，可以直接在文件的末尾使用export{}来一次导出需要对外的变量和方法，将其名称放在{}中即可，这种写法比较清楚明了。

使用as重命名

一般情况下，export导出的就是变量或函数的名字，但如果我们希望对外的变量或函数名不是文件中的名字，那么可以使用as关键字进行重命名，如下：

// util.js
const code = '200';
function add(x, y) {
    return x + y;
}; 
export {
  code as SUCCESS_CODE,
  add as addFn
};

import命令

如果一个模块中使用了export对外输出某个功能，那么在另外一个模块中就可以使用import命令来加载使用这个功能，如下：

// main.js
import { add } from './util.js';
const a = add(1, 2);

在main.js文件中，通过import命令从util.js文件中引入导出的add方法，然后在main.js文件中就可以直接使用，这里需要注意的是import{}中的名字需要和export导出的名字保持一致，但如果不想使用export导出的名字，import的时候也可以使用as关键字对其进行重命名，如下：

// main.js
import { add as addFn } from './util.js';
const a = addFn(1, 2);

除了上面指定导入某个输出变量或函数，import还可以使用*来指定一个对象，直接整体加载某一个模块，这样，模块中所有的导出方法都会加载在这个对象上，如下：

// main.js
import * as util from './util.js';
const a = util.add(1, 2);

export default命令

import导入的时候需要知道导出的函数名或是变量名，否则就没办法进行导入，但export default命令可以指定默认输出，这样import在导入的时候就可以为export default默认导出的功能进行随意命名，如下：

// util.js
export default function (x, y) {
    return x + y;
};
// main.js
import add from './util';
const a = add(1, 2);

如上，我们使用export default默认导出一个匿名函数，然后import的时候可以直接为其命名为add，并且这里不使用{}符号。另外在一个模块中export default只能使用一次，import也可以同时导入一个模块的默认输出(export default)和export输出，如下:

import utilFn, { code } from './util.js';