[ES6] import & export 模組學習心得

前言

這個情境是指，當我們開發一個專案時，程式碼愈寫愈多，整個應用程式的規模愈來愈大時，那又如果我們都把全部的 JS 程式碼都集中在一個檔案時，會造成維護及閱讀上的困難，這樣的狀況是很糟糕的。

好在 ES6 開始支援模組，使得標準的 JavaScript 也可以使用這個功能，接下來就會針對 Import 與 Export 的語法來說明如何使用。

模組的基本知識

先來看以下的基本範例，我們簡單的宣告了一個 boxArea 常數，用意是要計算盒子的面積。然後，要從外部存取 boxArea 這個模組，我們便要加上 export 這個關鍵字。

範例一

如範例一定義好的模組可用下面的範例二存取。這裡 import 的功能就是以檔案定義的模組程式。

範例二

import 指令的各種語法介紹

在這裡要說明 import 這個指令，在依實際撰寫程式碼不同的情境下，就會產生各種的寫法，以下將簡單介紹。

載入整個模組

使用星號 * 可以來載入該模組內的全部方法，但必須使用 as 來另外為該模組定義另外的名稱。

範例三

給予模組內的各個方法另外的名稱

同樣的該模組如果有多個方法，我們也可以每個方法給予另外的名稱。

範例四