模組管理 - Module

• 在ES5以前，javascript在支援模組化與模組載入的方式主要有兩種：
  

  1. AMD(Asynchronous Module Definition,非同步加載模組)，用於client端瀏覽器應用程式，避免瀏覽器按序讀取scripts時所發生的block現象，並且有條件的平行處理需要載入的js module，加快網頁讀取速度(參考資料1、參考資料2)
  2. commonJS用於瀏覽器以外的應用程式或server端，如node.js的模組載入實作。(參考資料1、參考資料2)
• ES6支援的模組(Module)語法，可使用原生語言就能實現現有的commonJS和AMD的規範，能部分匯出程式碼，方便檔案管理與功能分享

• 此外，ES6模組化的優點有：
  

  1. 靜態加載-以commonJS為例，let {func1, func2, func3 } = require('moduleA'); 會先載入mofuleA的所有方法，然後使用時再去執行引入的方法；
     在ES6中，import {func1, func2, func3 } from 'moduleA';只會載入指定的方法，並且編譯時也同時完成模組的編譯，效能上會比commonJS還要高
  2. 在server端跟client端都能支援ES6模組模式

• 模組主要有兩種識別字：export用於宣告此模組對外輸出的變數，import用於欲載入模組的其他js檔，輸入此模組的變數。主要目的為避免模組跟其他js檔案產生全域命名空間的衝突
  export ：寫在模組的js
• 輸出模組變數有以下兩種，以易讀性來說，第二種比較容易看出輸出了哪些變數。
  
• export也可以輸出函數跟類別，並且用as為輸出的東西重新命名，重新命名後，輸出的東西可以用不同的名字輸出多次
  import ：寫在要執行特定模組的js。需注意的地方有:
• {}裡的名稱需要與模組的名稱相同
• 可以as將變數名稱重新命名
• import具有提升特性，在程式中會優先執行 整體加載：在要執行使用特定模組的js中，以import *或module作為整體載入