1. 是什麼

模組化簡單來說就是將一個完整的長篇程式碼檔案根據功能進行劃分成幾個檔案，這些檔案各自負責一個獨立的功能，各個檔案組合起來實現一個完整的大功能，這就是模組化，每個負責獨立功能的檔案就是模組。

由於一開始JavaScript是在web頁面需要的地方提供一定互動，所以一般不需要多大的指令碼。但隨著JavaScript指令碼的複雜化，最新的瀏覽器已經開始原生支援JavaSript模組功能了。

2. 瀏覽器支援

使用JavaScript 模組依賴於 import 和 export，import 和 export 的瀏覽器支援程度是最新的瀏覽器版本都是支援的，但 IE 和舊版本的瀏覽器不支援，因此若想相容 IE 和舊版本的瀏覽器基本就不能使用了。

export 和 import 是成對出現，配合工作的

JS模組化是各種JS框架學習的前提基礎

import 和 export 語句用於將一個模組裡實現某些功能的變數或函式匯入/匯出，也可匯入/匯出類

3. export 匯出模組

預設匯出

一個模組只能有一個預設匯出，預設匯出的變數只能有一個，且不能有大括號{}

語法為export default 變數名

model.js

function Test1(){
    console.log("這是預設匯出")
}
function Test2(){
    console.log('這是命名匯出')
}
export default Test1
 

批量匯出

語法為export {變數名,變數名……}

function Test1(){
    console.log("這是預設匯出")
}
function Test2(){
    console.log('這是命名匯出')
}
export {Test1, Test2}

4. import 匯入模組

預設匯入

main.js

import Test1 from "./model.js"
Test1()

預設匯入的重新命名

main.js

import x from "./model.js"//x就是預設匯出的Test1
x()
 

批量匯入

main.js

import {Test1, Test2} from "./model.js"
Test1();
Test2();

批量匯入的重新命名

as關鍵字跟一個新名字實現重新命名

main.js

import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();

也可在匯出時用as關鍵字重新命名

model.js

function Test1(){
    console.log("這是預設匯出")
}
function Test2(){
    console.log('這是命名匯出')
}
export {Test1 as x1, Test2 as x2}

應用模組

html

<script src="main.js"></script>

5. 建立模組物件

使用物件，在as關鍵字重新命名的基礎上進一步簡單化

import * as Model from "./model.js"
Model.x1();
Model.x2();

6. export import 中轉站

有時候可以將多個子模組組合到一個父模組中，再由父模組決定匯出哪個，這個父模組檔案就像是個組合各個模組的中轉站

語法為export {變數名} from 模組路徑

當前目錄結構結構

src
    index.html
    main.js
    redirection.js
    models
        model.js
        model2.js

model.js

function Test1(){
    console.log("這是子模組1")
}
export {Test1}

model2.js

function Test2(){
    console.log('這是子模組2')
}
export {Test2}

redirection.js

export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"

main.js

import * as Model from "./redirection.js"
Model.Test1()
Model.Test2()

html

<script src="./main.js"></script>

7. 動態載入模組

動態載入模組用於在匯入模組時不必預先載入所有模組，可以在需要時使用 import() 作為函式呼叫，將其引數傳遞給模組的路徑，它返回一個 promise，使用 Promise 物件對模組載入結果操作。

語法為import(動態載入的模組路徑)

dynamic.js

function TestDy(){
    console.log("這是動態模組")
}
export default TestDy

main.js

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((Model)=>{
        Model.default()
    })
}

8. 參考

以上來源於 mdn javascript模組 學習，加自己測試用例檢驗後的整理總結，以上測試的原始碼連結為 js 模組測試用例