ES 6 系列 - Module 的語法

es 6 大幅度優化了模塊化編程的規范。

 

寫在前面：在 es6 之前，說起 js 的模塊化，一般都避不開 CommonJs 和 AMD 兩種方案。這兩種方案，前者應用於服務器，后者應用於瀏覽器。而 es 6 通過 export 和 import 這兩個關鍵字，完全取代上面兩種方案，且使用起來更簡單。

 

一、export 命令

　　出口，用於規定模塊的對外接口（這就意味着數據必須被包裝成對象的格式）。

　　一個模塊就是一個獨立的文件，該文件內部的所有變量，外部無法獲取。如果希望能獲取到內部的某個變量，就必須使用 export 將變量輸出：

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

 　　通常寫成，也建議這樣寫：

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

export {firstName, lastName, year};

　　以及輸出函數或者類：

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

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

　　export 輸出時，只有三種固定格式，其他均會報錯：

// 寫法一
export var m = 1;    // 聲明時輸出

// 寫法二
var m = 1;
export {m};      // 包裝成數據對象輸出

// 寫法三
var n = 1;
export {n as m};    // 使用別名輸出，基本上相當於第二種



// 報錯
export 1;

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

　　還有一點就是，export 輸出的接口，與其對應的值是動態綁定關系，即通過接口，可以獲取到模塊內部實時的值：

export var foo = 'bar';
setTimeout(() => foo = 'xyz', 500);


// 輸出變量 foo， 值為 bar , 500 ms 后變成 xyz

 

二、import 命令

　　入口，加載 export 的模塊中的變量、方法等。

// main.js
import {firstName, lastName, year} from './profile.js';

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

　　當然，引入的變量也可以修改變量名：

import { lastName as surname } from './profile.js';

 　　一個規范：import 進來的變量、方法、對象本身無法修改，但是，如果是對象的話，其中的某個屬性還是可以修改的，但但是，從規范上，不要進行任何修改，將引入的全部當做只讀，否則改 bug 會很頭疼。

 

　　如果 export 時未采用 {xxx,xxx} 方式，那么在 import 時，想要引入所有值，可以使用 * 來代替：

// main.js

import { 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 的時候會有一個問題，如果不知道需要加載的模塊中的變量名或者函數名，那就很尷尬。小模塊沒什么，點進去翻翻就知道，但是像 Vue、ElementUI 這種框架的時候，想要快速上手，先去翻翻文檔？

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


// import-default.js
import customName from './export-default';
customName(); // 'foo'

 

 　　如上例所示，通過 export default 出來的通常在 import 時候不需要 {}，且 import 時可以任意命名。