JS模块化方案(4)之ES6模块化

一、基本介绍

不同于CommonJS等规范。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

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

1、export命令
个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

export var firstName = 'Michael'; //test.js
export var lastName = 'Jackson';
export var year = 1958;

export的写法，除了像上面这样，还有另外一种：
它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

var firstName = 'Michael'; //test.js
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

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

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

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
下面两种写法都会报错，因为没有提供对外的接口。
第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。

export 1;// 报错   
var m = 1;export m; // 报错
function f() {
   }  export f; // 报错
        正确的写法是下面这样：
export var m = 1;   export function f() {
   };   // 写法一
var m = 1;    export {m}  
function f() {
   };  export {f};                   // 写法二

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错

2、import命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块. import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（test.js）对外接口的名称相同。import命令具有提升效果，会提升到整个模块的头部，首先执行。

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

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

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

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口

import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only; 

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

// 报错
import { 'f' + 'oo' } from 'my_module';

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

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

整体模块的加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上。

import * as circle from './circle';

3、export default命令
从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。Default本身就是变量，export default命令的本质是将后面的值，赋给default变量。

export default function () {
   console.log('foo');} //正确
export default function<