ES 6 系列 - Module 的语法

es 6 大幅度优化了模块化编程的规范。

写在前面：在 es6 之前，说起 js 的模块化，一般都避不开 CommonJs 和 AMD 两种方案。这两种方案，前者应用于服务器，后者应用于浏览器。而 es 6 通过 export 和 import 这两个关键字，完全取代上面两种方案，且使用起来更简单。

一、export 命令

　　出口，用于规定模块的对外接口（这就意味着数据必须被包装成对象的格式）。

　　一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果希望能获取到内部的某个变量，就必须使用 export 将变量输出：

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

　　通常写成，也建议这样写：

// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export {firstName, lastName, year};

　　以及输出函数或者类：

function v1() { ... }

function v2() { ... }

export {

  v1 as streamV1,

  v2 as streamV2,

  v2 as streamLatestVersion

};

　　export 输出时，只有三种固定格式，其他均会报错：

// 写法一

export var m = 1;    // 声明时输出

// 写法二

var m = 1;

export {m};      // 包装成数据对象输出

// 写法三

var n = 1;

export {n as m};    // 使用别名输出，基本上相当于第二种

// 报错

export 1;

// 报错

var m = 1;

export m;

　　还有一点就是，export 输出的接口，与其对应的值是动态绑定关系，即通过接口，可以获取到模块内部实时的值：

export var foo = 'bar';

setTimeout(() => foo = 'xyz', 500);

// 输出变量 foo， 值为 bar , 500 ms 后变成 xyz

二、import 命令

　　入口，加载 export 的模块中的变量、方法等。

// main.js

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

function setName(element) {

  element.textContent = firstName + ' ' + lastName;

}

　　当然，引入的变量也可以修改变量名：

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

　　一个规范：import 进来的变量、方法、对象本身无法修改，但是，如果是对象的话，其中的某个属性还是可以修改的，但但是，从规范上，不要进行任何修改，将引入的全部当做只读，否则改 bug 会很头疼。

　　如果 export 时未采用 {xxx,xxx} 方式，那么在 import 时，想要引入所有值，可以使用 * 来代替：

// main.js

import { area, circumference } from './circle';

console.log('圆面积：' + area(4));

console.log('圆周长：' + circumference(14));

// 可以简写成

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));

console.log('圆周长：' + circle.circumference(14));

三、export default 命令

　　使用 import 的时候会有一个问题，如果不知道需要加载的模块中的变量名或者函数名，那就很尴尬。小模块没什么，点进去翻翻就知道，但是像 Vue、ElementUI 这种框架的时候，想要快速上手，先去翻翻文档？

// export-default.js

export default function () {

  console.log('foo');

}

// import-default.js

import customName from './export-default';

customName(); // 'foo'

　　如上例所示，通过 export default 出来的通常在 import 时候不需要 {}，且 import 时可以任意命名。