ECMAScript 6 Module

t f;// 正确export function f() {};// 正确function f() {}export {f};另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。export var foo = 'bar';setTimeout(() => foo = 'baz', 500);上面代码输出变量foo，值为bar，500毫秒之后变成baz。这一点与CommonJS规范完全不同。CommonJS模块输出的是值的缓存，不存在动态更新，详见下文《ES6模块加载的实质》一节。最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了ES6模块的设计初衷。function foo() { export default 'bar' // SyntaxError}foo()上面代码中，export语句放在函数之中，结果报错。import命令使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。// main.jsimport {firstName, lastName, year} from './profile';function setName(element) { element.textContent = firstName + ' ' + lastName;}上面代码的import命令，就用于加载profile.js文件，并从中输入变量。import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。import { lastName as surname } from './profile';注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。foo();import { foo } from 'my_module';上面的代码不会报错，因为import的执行早于foo的调用。如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。export { es6 as default } from './someModule';// 等同于import { es6 } from './someModule';export default es6;上面代码中，export和import语句可以结合在一起，写成一行。但是从可读性考虑，不建议采用这种写法，而应该采用标准写法。另外，ES7有一个提案，简化先输入后输出的写法，拿掉输出时的大括号。// 提案的写法export v from 'mod';// 现行的写法export {v} from 'mod';import语句会执行所加载的模块，因此可以有下面的写法。import 'lodash';上面代码仅仅执行lodash模块，但是不输入任何值。模块的整体加载除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。下面是一个circle.js文件，它输出两个方法area和circumference。// circle.jsexport function area(radius) { return Math.PI * radius * radius;}export function circumference(radius) { return 2 * Math.PI * radius;}现在，加载这个模块。// main.jsimport { 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命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。// export-default.jsexport default function () { console.log('foo');}上面代码是一个模块文件export-default.js，它的默认输出是一个函数。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。// import-default.jsimport customName from './export-default';customName(); // 'foo'上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。export default命令用在非匿名函数前，也是可以的。// export-default.jsexport default function foo() { console.log('foo');}// 或者写成function foo() { console.log('foo');}export default foo;上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。下面比较一下默认输出和正常输出。// 输出export default function crc32() { // ...}// 输入import crc32 from 'crc32';// 输出export function crc32() { // ...};// 输入import {crc32} from 'crc32';上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export deault命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法。本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。// modules.jsfunction add(x, y) { return x * y;}export {add as default};// 等同于// export default add;// app.jsimport { default as xxx } from 'modules';// 等同于// import xxx from 'modules';正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。// 正确export var a = 1;// 正确var a = 1;export default a;// 错误export default var a = 1;上面代码中，export default a的含义是将变量a的值赋给变量default。所以，最后一种写法会报错。有了export default命令，输入模块时就非常直观了，以输入jQuery模块为例。import $ from 'jquery';如果想在一条import语句中，同时输入默认方法和其他变量，可以写成下面这样。import customName, { otherMethod } from './export-default';如果要输出默认的值，只需将值跟在export default之后即可。export default 42;export default也可以用来输出类。// MyClass.jsexport d