ES6筆記--module語法

在es6以前存在AMD(瀏覽器)和CommonJS(服務器)模塊加載方案，而ES6的模塊加載方案使其成爲通用方案。ES6的模塊加載機制在編譯時就能肯定模塊的依賴關係，而AMD和CommonJS規範則在運行時才能肯定加載依賴，所以ES6的模塊規範是靜態化的，編譯時直接加載對應模塊，具備自然的編譯優點。

自動採用嚴格模式，在模塊頭部自動添加 "use strict"，export和import必須在模塊頂層，不能再塊級做用域中。

ES6中的_import_(輸入其餘模塊的功能) 和 export(對外提供接口)

Export

_ 輸出一組變量：_

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};// profile.js

輸出函數或類（class）：

export function multiply(x, y) {
  return x * y;
};

使用as關鍵字重命名：

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

export對外的接口，必須與模塊內部的變量創建一一對應關係

錯誤寫法：

// 報錯
export 1;

// 報錯
var m = 1;
export m;

正確寫法：

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

Import命令具備提高效果，會提高到整個模塊的頭部，首先執行。路徑中能夠是相對路徑和絕對路徑，不帶有路徑必須經過配置，告訴引擎怎麼取到這個模塊。因爲ES6中的模塊加載時靜態執行過程，所以不容許表達式。

輸入變量

// main.js  注意須要與export中的暴露的接口名稱保持一致
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

使用總體加載，即用星號（*）指定一個對象，全部輸出值都加載在這個對象上面。

// circle.js  export暴露接口

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// main.js import總體加載

import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

export default命令輸出的是模塊默認值，import該模塊時不須要大括號{}！！！

export default命令其實只是輸出一個叫作default的變量，因此它後面不能跟變量聲明語句。

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯誤
export default var a = 1;