uncategorized

模組(Modules)

es6, export, import, module

Modules 模組系統是 ES6 的新功能，透過 import 與 export 關鍵字，你可將以往冗長且結構複雜的程式碼拆解成各個小區塊，以便我們可以把A檔案的程式碼導入到B檔案使用。Exports 有兩種輸出方式，分別是 Default export 與 Named exports

預設匯出(Default export)

Default export 的作用是為模組指定預設輸出。舉個例子，假設我們在 human.js 的檔案裡頭，有一個名為 person 的常數，我們用 export 將其輸出，語法為 export default person

1
2
3
4
5
//human.js
const person = {
    name: 'Max'
}
export default person

接下來我們想要在其他的 js 檔案，例如 app.js 引入 person 這個常數，只要用 import person from ‘./human.js’ 即可，person 可換成任意名稱，因為我們已經在 human.js 指定了常數 person 為預設輸出(export default)，所以我們不管在任何地方，從 human.js 引入的預設值都是常數 person。

1
2
3
4
5
//app.js
import person from './human.js'
import prs from './human.js'
import xyz from './human.js'
//import 後面不管任何名稱，都是引入 human.js 的常數 person

簡而言之，這裡記住兩個重點：

  • 每一支 JS 檔案只能有一個預設匯出
  • export 引入的預設匯出，可以任意命名

具名匯出(Named exports)

當你的 JS 有兩個以上的變數要匯出時，這時就要用具名匯出(Named exports)，以下是程式碼：

1
2
3
4
5
6
7
8
//utility.js
export const clean = () => {...} 
export const baseData = 10;
export function foo(){
  //...
}
const Avengers = ['Ironman', 'Hulk', 'Thor', 'Loki']
export { Avengers }

下面是另一種匯出的方式，一般也比較推薦下面的寫法，因為這樣在檔案最下方輸出，可一眼看出總共輸出了哪些變數。

1
2
3
4
5
6
7
8
const clean = () => {...} 
const baseData = 10;
function foo(){
  //...
}
const Avengers = ['Ironman', 'Hulk', 'Thor', 'Loki']

export { clean, baseData, foo, Avengers }

匯出別名

一般情況下，export 輸出的變數就是本來的名字，但你也可以使用 as 關鍵字重新命名。我們也可重複重新命名這個動作。

1
2
3
4
5
6
7
8
function kick_01() { ... }
function kick_02() { ... }

export {
  kick_01 as k1,
  kick_02 as k2,
  kick_02 as kickkkkkkk  //重複重新命名
};

引入具名匯出須加大括號

引入具名匯出必須明確指出引入的是哪一個變數，所以名稱必須跟匯出的名稱相同，然後在名稱前後加上花括號 {…}

1
2
3
//app.js
import { baseData } from './utility.js'
import { clean } from './utility.js'

匯入別名

跟匯出別名一樣，你也可以在引入具名匯出後，任意的命名自己想要的名稱，只要使用 as 關鍵字即可

1
2
3
import { ironman } from './utility.js'
import { tony as ironman }from './utility.js'
//指定一個別名，然後你可以在要導入的文件中自由選擇該別名as關鍵字

同時引入多個輸出

當檔案中有多個命名輸出，你可使用 * 導入所有內容，然後分配別名並進行綁定，在此情況中，它將是一個 object，以便你可使用例如：bundled.baseData, bundled.clean …等方法，即可使用 export 的變數。

1
import * as bundled from './utility.js'

export 與 import 一定要放在頂層範疇

export 與 import 一定得出現在頂層範疇(top-level scope)。舉例來說，你不能將 export 或 import 放在 if 條件式內，它們必須出現在所有區塊與函式之外。

參考連結:
React 16 - The Complete Guide
ECMAScript 6 入门
從ES6開始的JavaScript學習生活
MDN - export
ES6：export default 和 export 区别
你所不知道的JS：ES6與未來發展
深入浅出ES6（十六）：模块 Modules

Share