模組

社群上發展了兩套知名的模組系統，但它們並不相容: CommonJS Modules Asynchronous Module Definition (AMD)

ES6中加入了模組系統的支援，它採用了CommonJS與AMD的優點，成了未來JavaScript語言中重要的特性。

ES6的模組系統

• ES6的模組是一個檔案一個模組。方便不同的模組互相取用，擴充應用程式規模，並進行良好的管理。

• ES6模組使用export(輸出)與import(輸入)語句來進行模組輸出與輸入。輸出通常位於檔案最後，輸入位於最前面。

輸出與輸入

//一個檔案一個輸出
//實務上一個檔案內有一個類別，使用一個輸出
function aFunction(param){
  return param * param
}
//單一輸出用default
export default aFunction



//一個檔案多個輸出
//實務上資料類型的定義會集中在一個檔案，有多個輸出
export const aString = 'test'

export function aFunction(){
  console.log('function test')
}

export const aObject = {a: 1}

export class aClass {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}

輸入

• 一種是每個要輸入的名稱都需要定在花括號之中。若只有一個輸出，就不用花括號。

• 另一種是使用萬用字元(*)

//第一種
//匯入在lib.js內的指定資料
import {aString, aObject, aFunction, aClass} from './lib.js'

console.log(aString)
console.log(aObject)

//第二種
//匯入所有lib.js內的匯出資料，取名mymodule
import  * as myModule from './lib.js'

console.log(myModule.aString)
console.log(myModule.aObject)