ES6学习——模块化：import和export

关于JS模块化的使用，大家肯定不陌生，现有的主要两种：CMD和AMD，还有一种兼容CMD和AMD写法的UMD。一般前端框架都支持AMD，而node.js采用的是CMD的模块语法。

ES6中规范化了模块的导入和导出语法，在规范的15.2章节中。现在浏览器还都不支持，想要尝试的可以使用Traceur或者Babel。貌似Angular 2.0也要采用ES6的模块化语法，相信以后浏览器肯定会逐步支持的。

本篇文章只是大概介绍一下基本的语法，详细使用留在以后浏览器支持了 再说。

export——

基本的两种用法：

export function foo() {
// ..
}
export var awesome = 42;
var bar = [1,2,3];
export { bar };

function foo() {
// ..
}
var awesome = 42;
var bar = [1,2,3];
export { foo, awesome, bar };

导出的时候重命名:

function foo() { .. }
export { foo as bar };

默认导出，每个模块只能有一个默认导出：

function foo(..) {
// ..
}
export default foo;
export{ foo as default };

混合默认导出和普通的导出：

function foo() { .. }
function bar() { .. }
function baz() { .. }
export { foo as default, bar, baz, .. };

从其他模块导出：

export { foo, bar } from "baz";
export { foo as FOO, bar as BAR } from "baz";
export * from "baz";

import——

import { foo } from "foo";
foo();

import { foo as theFooFunc } from "foo";
theFooFunc();

import foo from "foo";
// or:
import { default as foo } from "foo";

export default function foo() { .. }
export function bar() { .. }
export function baz() { .. }

import FOOFN, { bar, baz as BAZ } from "foo";
FOOFN();
bar();
BAZ();

export function bar() { .. }
export var x = 42;
export function baz() { .. }

import * as foo from "foo";
foo.bar();
foo.x; // 42
foo.baz();

import有一个hoisted的过程，和var声明变量一样：

foo();
import { foo } from "foo";