ES6中module模块

在 ES6 之前，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。社区制定了一些模块加载方案，CommonJS 规范很好，但是不适用于浏览器环境，于是有了 AMD 和 CMD 两种方案。
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

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

// 等同于
//整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

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

// ES6模块
//从fs模块加载 3 个方法，其他方法不加载
import {
    stat, exists, readFile } from 'fs';

这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

严格模式
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

export 命令

// profile.js
export let firstName = 'Michael';
//另外一种
// profile.js
let firstName = 'Michael';
let lastName = 'Jackson';
export {
    firstName, lastName };
//输出函数或类（class）
export function multiply(x, y) {
   
  return x * y;
};
//使用as关键字重命名。
function v1() {
    ... }
function v2() {
    ... }

export {
   
  v1 as streamV1,
  v2 as streamV2
};

// 报错
export 1;

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

没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

//其他脚本可以通过接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。
// 写法一
export let m = 1;

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

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

function和class的输出，也必须遵守上面的写法
另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export let foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo，值为bar，500 毫秒之后变成baz。

这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

//export语句放在函数之中，结果报错。
function foo() {
   
  export default 'bar' // SyntaxError
}
foo()

import 命令

import命令接受一对大括号，里面指定要从其他模块导入的变量名。

// main.js
import {
    firstName } from './profile.js';
import {
    lastName as surname } from './profile.js';
function setName(element)