ES6—Module简介

在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。
CommonJS用于服务器；AMD用于浏览器
ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出变量。CommonJS和AMD模块，都只能在运行确定这些东西。
如：CommonJS模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readFile } = require('fs');

以上的实质是整体加载 fs 模块（即加载 fs 的所有方法），生成一个对象 fs ，然后再从这个对象中读取三个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

ES6模块不是对象，而是通过export命令显示指定输出的代码，在通过import命令输入

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从 fs 模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即ES6可以在编译时就完成模块加载，效率比CommonJS模块加载方式高。

一、语法
模块功能主要有两个命令构成：export和 import
export 命令用于 规定模块的对外接口
import 命令用于输入其他模块提供的功能

export 抛出的几种方法：

//方法一
export var firstName = 'Michael';
//方法二
var firstName = 'Michael';
export { firstName};

export 命令除了输出变量，还可以输出函数或类（class）

export function multiply(x, y) {
  return x * y;
};

还可以通过 as 关键字来对抛出的方法重新进行命名
注意
export命令规定的是对外的接口，必须与模块内部的变量之间，建立一一对应关系。

另外 export 语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以去到模块内部实时的值。
这与CommonJS规范完全不同，CommonJS模块输出的是值的缓存，不存在动态更新。
import
通过该语句可以通过命令加载这个模块
import命令接受一对大括号，里面指定要从其他模块导入的变量名，必须与被导入模块对外的接口相同。
该命令输入的变量是只读的，因为它的本质是输入接口，即不允许在加载模块的脚本里面，改写接口。
import命令具有提升效果，会提升到模块头部，首先执行。

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

也可使用 as 来重命名

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

二、加载方式
1、指定载入

import { foo, bar } from 'my_module';

2、默认输出
好处：在使用import命令时，不必知道所要加载的变量名或函数名
语法：使用 export default

// export-default.js
export default function () {
  console.log('foo');
}

可以为改匿名函数指定任意的名字

// import-default.js
import customName from './export-default';
customName(); // 'foo'

注意：使用 默认输出时，import命令 后面，不用大括号
一个模块只能有一个默认输出，因此export default命令只能使用一次
3、整体加载
使用 * 指定一个对象 所有输出值都加载在这个对象上面

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// main.js
import * as circle from './circle';
cosole.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

4、按需加载

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

5、条件加载

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}