這一篇就簡單整理一下在網路上看到有關 ES6 管理模組的語法。
因為，在我撰寫的 Vue 專案裡面，常常用到 export 和 import 的語法，所以，特別來記錄一下。

export和import使用時機

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

多輸出模組寫法

有寫成模組的程式碼檔案，才能讓其他程式碼檔案進入。
模組輸出可以使用 export 關鍵字，只要加在想輸出內容的前面就可以將他們輸出。
可以輸出的內容有物件、類別、函式與原始資料(變數與常數)。
example:

export const aString = '123'

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

export const aObj = { a: 1}

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

上面的範例為多輸出名稱的情況。

多輸入模組語法

那我們有兩種方式可以輸入，這些可以被輸出的內容

Way1. 使用花括號引入指定模組

每個要輸入的名稱都需要定義在花括號 {} 之中
如:

import {aString, aFunction, aObj, aClass} from './lib.js'

console.log(aString)
console.log(aObj)

Way2. 使用萬用字元(*)全部引用

使用萬用字元(*)，代表要輸入所有的輸出定義的值
不過使用這種方法的話，我們需要加上一個模組的名稱，這是為了防止命名空間的衝突之用。
之後的程式碼都需要用這個模組名稱來調用輸出模組中的值

import * as myModule from './lib.js'

console.log(myModule.aString) 
console.log(myModule.aObj) 

myModule.aFunction()
const newObj = new myModule.aClass('Mary', 20)
console.log(newObj)

單一輸出模組寫法

如果要輸出的模組程式碼檔案中，只有一個要輸出的常數/變數、函式、類別或物件。
通常會加上 default 關鍵詞。如果要使用有回傳值的函式，通常也是用單一輸出的方式。

function aFunction (parm) {
  return parm * parm
}

export default aFunction

那對單一輸出的模組，就不需要額外用花括號，代表只輸入以 default 值定義的輸出語句

1
2
3

import aFunction frim './lib.js'

console.log(aFunction(5))

那很特別的是，在單一輸出的情況下，我們可以在輸入時改變輸入值的名稱，這樣確保輸入檔案中，不會有名稱衝突的情況

1
2
3

import square from './lib.js'

console.log(square(5))

Landy Blog

JavaScript-export和import介紹