ES6之module语法（export和import）

前言：ES6 在语言标准的层面上，实现了模块功能。

模块化语法

一、export

• export：用来定义模块，可以导出对象、函数、类、字符串等等

1、输出变量

// profile.js
export var firstName = 'lisa';
export var lastName = 'guagua';
export var age = 18;

// profile.js
var firstName = 'lisa';
var lastName = 'guagua';
var age = 18;

export { firstName, lastName, age  };

以上 ↑ 两种写法完全等同。
注意点：export输出的必须是接口，并且要与模块内的变量相对应。

// 报错
export 1;

// 报错
var m = 1;
export m;

报错原因：第一种直接输出1，第二种输出变量m同样是输出1，只是一个数据而不是接口。
正确写法如下 ↓

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};
export {n as p};

注释：使用as关键字，可以重命名了对外接口，并且可以命名两次。

2、输出函数或类（class）

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2
};

二、import

• import：用于引入其他模块提供的功能，输入的变量都是只读的，不可更改

// main.js
import { firstName, lastName, age } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令可以使用as关键字，将输入的变量重命名。

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

三、export default

export default 命令为模块指定默认输出

与export 区别：

1. 一模块中只允许出现一个export default；
2. 通过export方式导出，在导入时要加{ }，exportdefault则不需要加{ }
3. export default与普通的export不要同时使用