Table of Contents
javascript es6 模組
javascript 在 ES6 在語言上直接支援了 模組
它的使用方法與概念 有點類似 python
- 一個檔案對應到一個模組
- 使用 export, import 宣告要匯出 以及希望匯入的功能
import / export
- default import/export
- named import /export
模組 可以匯出或者是匯入一個主要的值 (primitive or object value, funciotn, …) 這個主要的值 被成為 default
模組 同時可以匯出或者匯入 有名稱的值 (primitive or object value, function, …)
Default Imports/Exports
ES6 編好 default imports/exports 因為它的寫法相對比較簡潔
每個檔案 都只能有 一個 default export
範例 1 export
export default function func() {...}
Export Name "default"
Local Variable "func"
範例 2 export
export default function() {...}
Export Name "default"
Local Variable "default"
範例 3 export
export default 42
Export Name "default"
Local Variable "default"
範例 4 import
import myDefault from "mod";
Module Requested "mod"
Import Name "default"
Local Variable "myDefault"
在 mod.js 的 default exported value 被匯入到 區域變數 myDeault
Named Imports/Exports
Named Imports/Exports 的寫法比較複雜一些
範例 1 export
export var num = 100000
Export Name "num"
Local Variable "func"
範例 2 export
export { str }
Export Name "str"
Local Variable "str"
範例 3 export
export { str as myStr }
Export Name "myStr"
Local Variable "str"
範例 4 export
export * from "someMod"
Export Name
Module Requested "someMod"
Import Name "*"
Local Variable
Re-exports all named exports from someMod.js.
Import
範例 5 import
{} 或是 * 用來匯入 named export
import { num } from "mod";
Module Requested "mod"
Import Name "num"
Local Variable "num"
範例 6 import
{} 或是 * 用來匯入 named export
import { num as myNum } from "mod";
Module Requested "mod"
Import Name "num"
Local Variable "myNum"
範例 7 import
{} 或是 * 用來匯入 named export
import * as myObj from "mod";
Module Requested "mod"
Import Name "*"
Local Variable "myObj"
The * imports all named exports from module mod.js into a single object literal called myObj
Referecne
Build Better Apps with ES6 Modules https://danmartensen.svbtle.com/build-better-apps-with-es6-modules