ES6模块

随着JavaScript在Web开发中占的比重原来越重，每个项目中需要用到的JavaScript代码规模也变得原来越大，在这种发展的背景下，怎样有效的管理这些日益庞大的代码，成了日常开发的一个重要课题。为了解决这个问题，出现了我们之前介绍的两个模块规范CMD与AMD，对于ECMAScript 6已经正式发布这个事件，作为一个JSer应该是会此感到比较高兴的，因为它带了很多新特性，让JavaScript在语法上发生了一个重大的变革，这其中就有本节介绍的ES6模块。

一个ES6模块就是一个JavaScript文件，一段稍有差异的脚本代码，说差异其实与普通的脚本代码也没多大差异，主要是下面两点：

• 在ES6模块中，默认情况下脚本都是在严格模式下运行，无论是否加上“use strict”。
• 脚本中import和export是与function一样的特殊关键字。

除此之外再无异同。

// 定义模块 greet.js
export default function() {
  console.log("hello");
}

// 引用模块 main.js
import greet from "./greet";
greet(); // hello

ES6模块通过export关键词定义模块对外的接口。模块中的所有变量（对象、函数等）的作用范围只限于模块本身，外部是不能访问的，如果想让外部访问则需要使用export将其暴露出去。

注意点：

• export规定的是对外的接口，必须与模块内部的变量构成一对一的关系
• export输出的接口与模块中对应的值是动态绑定的关系，也就是说，在内部更改这一变量的值，外部的值也会随之更改
• 可以使用default关键字为模块指定默认输出

// testExport.js
export 1; // 错误
let x = 1; 
export x; // 错误
export var x = 1; // 正确

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

let object = {x: 1};
export object; 错误

export {object as obj}; // 使用as关键字可以取别名

object.x = 10;

// testImport.js
import obj from "./testExport";
obj.x; // 10

ES6模块通过import关键词引入其他模块的对外接口。 注意点：

• import具有提升效果，会提升到整个模块的头部首先执行（import是编译阶段执行的，在代码运行之前）
• import是静态执行的，使用import的时候不能使用表达式和变量
• import是单例模式（singleton）。

f(); // 不会出错
import f from "module";

let obj = {x: "name"};
import { obj.x + "Func" } from "module"; // 错误 
let module = "myModule";
import x from module; // 错误

// 错误
if(true) {
  import x from "module1";
} else {
  import x from "module2";
}

ES6模块在不同程度上参考了CMD与AMD规范，并且尽可能去其糟粕，留其精华。ES6模块的主体思想是尽量的静态化，使得在编译事就能确定个模块间的依赖关系，以及相关的输入输出。

主要特点有：

• 更为简洁的语法（import与export）
• 异步可配置的模块加载