理解ES2015(ES6)的Module

语法

注意：import命令具有提升效果,不管写在哪一行都会提到模块头部首先执行

import

import 模块名 from '路径'

// 引入变量 默认名称
import {firstName, lastName, year} from './profile';

// 需要 更名使用 `as` 关键字
import { lastName as surname } from './profile';

// 整体加载模块
import * as circle from './circle';

// 直接输出默认（匿名）方法（或变量），可以取一个方法名字，如customName
import customName from './export-default';
customName();

// 同时输入默认方法和其他变量
import customName, { otherMethod } from './export-default';

export

输出变量

export var firstName = 'Michael';

或

var firstName = 'Michael';
export {firstName};

方法也是同样。
方法还可以直接以function的方式输出,叫做模块的整体加载

// test.js
export function foo() {};
export function foo1() {};

引入时可以直接使用

import { foo, foo1 as f } from './test';
foo();
f();

输出时可以使用as重命名变量名

export {
 v1 as streamV1
}

输入默认接口 export default

// export-default.js
export default function () {
  console.log('foo');
}

注意： 输出的必须是一个接口（对象或者类或方法），而不能直接是一个变量，如数字，字符串之类的

支持情况

浏览器

截止2016.08.02,所有浏览器均还不支持原生模块化

Node.js

Node.js 6以上

ES2015模块加载的本质

ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

模块的继承

// circleplus.js

export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}

注意

1. export *命令会忽略模块的default方法

2. 循环引用

// a.js
var b = require('b');

// b.js
var a = require('a');