ES6学习总结之 Module

ES6 模块的设计思想，是尽量静态化，编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些。

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时

就完成模块加载，效率要比 CommonJS 模块的加载方式高。

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1.export命令

如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量：

export var firstName = 'Lebron';
export var lastName = 'James';
export var year = 1984;

或者像下面这样一次性输出：

var firstName = 'Lebron';
var lastName = 'James';
var year = 1984;

export {firstName,lastName,year};

export还可以输出函数：

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

在输出函数时候，如果函数未命名，可以用as指定函数别名：

function f1() { ... }
function f2() { ... }

export {
  f1 as FooF1,
  f2 as FooF2,
  f2 as FooF2new
};

上面代码使用as关键字，重命名了函数f1和f2的对外接口。重命名后，f2可以用不同的名字输出两次。

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。不可以直接输出值：

// 报错
export 666;

// 报错
var a= 666;
export a;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出666，第二种写法通过变量a，还是直接输出666。666只是一个值，不是接口。正确的写法如下：

// 写法一
export var a = 666;

// 写法二
var a= 666;
export {a};

// 写法三
var b = 666;
export {b as a};

同样对于函数和类的输出也是如此：

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

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

2.import命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

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

import { lastName as surname } from './mm';

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

import {method} from 'util';

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

由于import是静态执行，所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构：

// 报错
import { 'b' + 'a' + 'r'} from 'my_module';

// 报错
let module = 'my_module';
import { bar } from module;

// 报错
if (x >= 666) {
  import { bar } from 'module1';
} else {
  import { bar } from 'module2';
}

上面三种写法都会报错，因为它们用到了表达式、变量和if结构。在静态分析阶段，这些语法都是没法得到值的。

另外，import语句会执行所加载的模块：

import 'lodash';

上面代码仅仅执行lodash模块，不输入任何值。

同样，如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。

最后，如果一个模块先输入后直接输出，import语句可以和export语句写在一起：

export {my_tool as default} from './util';

// 等价于
import my_tool from './util';
export default my_tool;

3.模块整体加载

用星号（*）指定一个对象，所有输出值都加载在这个对象上面。注意，模块整体加载所在的那个对象，应该是可以静态分析的，所以不允许运行时改变。

// common.js

export function foo() {
  return 'hello world';
}

export function bar(r) {
  return 'I love ES6';
}

import * as common from './common';

// 下面两行都是不允许的
common.foo = 'hello';
common.bar = function () {};

4.module命令

module命令可以代替import语句，达到整体输入模块的目的，module命令后面跟着一个变量，表示输入的模块定义在该变量上：

module common from './common';

5.export default命令

export default命令，为模块指定默认输出，其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

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


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

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

同样地，因为export default本质是将该命令后面的值，赋给default变量以后再默认，所以直接将一个值写在export default之后：

// 正确
export default 666;

// 报错
export 666;

6.模块的继承

模块之间也可以继承。假设有一个fooBar模块，继承了foo模块。

// fooBar.js

export * from 'foo;
export var a = 666;
export default function(x) {
  return 'hello' + x;
}

上面代码中的export *，表示输出foo模块的所有属性和方法。注意，export *命令会忽略foo模块的default方法。然后，上面代码又输出了自定义的a变量和默认方法。

import * as math from 'fooBar';
import love from 'fooBar';
console.log(love(dear));

上面代码中的import love表示，将fooBar模块的默认方法加载为love方法。

7.ES6模块加载的实质

ES6 模块与 CommonJS 模块完全不同，它们主要有以下两点不同：

1.CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

2.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。(CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。)