理解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');