JavaScript模塊化

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 模塊測試用例