1、模塊化是什么

模塊化簡(jiǎn)單來(lái)說(shuō)就是將一個(gè)完整的長(zhǎng)篇代碼文件根據(jù)功能進(jìn)行劃分成幾個(gè)文件，這些文件各自負(fù)責(zé)一個(gè)獨(dú)立的功能，各個(gè)文件組合起來(lái)實(shí)現(xiàn)一個(gè)完整的大功能，這就是模塊化，每個(gè)負(fù)責(zé)獨(dú)立功能的文件就是模塊。

由于一開(kāi)始JavaScript是在web頁(yè)面需要的地方提供一定交互，所以一般不需要多大的腳本。但隨著JavaScript腳本的復(fù)雜化，最新的瀏覽器已經(jīng)開(kāi)始原生支持JavaSript模塊功能了。

2、瀏覽器支持

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

export 和 import 是成對(duì)出現(xiàn)，配合工作的

js模塊化是各種js框架學(xué)習(xí)的前提基礎(chǔ)

import 和 export 語(yǔ)句用于將一個(gè)模塊里實(shí)現(xiàn)某些功能的變量或函數(shù)導(dǎo)入/導(dǎo)出，也可導(dǎo)入/導(dǎo)出類(lèi)

3、export 導(dǎo)出模塊

默認(rèn)導(dǎo)出

一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出，默認(rèn)導(dǎo)出的變量只能有一個(gè)，且不能有大括號(hào){}

語(yǔ)法為export default 變量名

model.js

function Test1(){    console.log("這是默認(rèn)導(dǎo)出")}function Test2(){    console.log('這是命名導(dǎo)出')}export default Test1

批量導(dǎo)出

語(yǔ)法為export {變量名,變量名……}

function Test1(){    console.log("這是默認(rèn)導(dǎo)出")}function Test2(){    console.log('這是命名導(dǎo)出')}export {Test1, Test2}

4、import 導(dǎo)入模塊

默認(rèn)導(dǎo)入

main.js

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

默認(rèn)導(dǎo)入的重命名

main.js

import x from "./model.js"//x就是默認(rèn)導(dǎo)出的Test1x()

批量導(dǎo)入

main.js

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

批量導(dǎo)入的重命名

as關(guān)鍵字跟一個(gè)新名字實(shí)現(xiàn)重命名

main.js

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

也可在導(dǎo)出時(shí)用as關(guān)鍵字重命名

model.js

function Test1(){    console.log("這是默認(rèn)導(dǎo)出")}function Test2(){    console.log('這是命名導(dǎo)出')}export {Test1 as x1, Test2 as x2}

應(yīng)用模塊

html

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

5、創(chuàng)建模塊對(duì)象

使用對(duì)象，在as關(guān)鍵字重命名的基礎(chǔ)上進(jìn)一步簡(jiǎn)單化

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

6、export import 中轉(zhuǎn)站

有時(shí)候可以將多個(gè)子模塊組合到一個(gè)父模塊中，再由父模塊決定導(dǎo)出哪個(gè)，這個(gè)父模塊文件就像是個(gè)組合各個(gè)模塊的中轉(zhuǎn)站

語(yǔ)法為export {變量名} from 模塊路徑

當(dāng)前目錄結(jié)構(gòu)結(jié)構(gòu)

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、 動(dòng)態(tài)加載模塊

動(dòng)態(tài)加載模塊用于在導(dǎo)入模塊時(shí)不必預(yù)先加載所有模塊，可以在需要時(shí)使用 import() 作為函數(shù)調(diào)用，將其參數(shù)傳遞給模塊的路徑，它返回一個(gè) promise，使用 Promise 對(duì)象對(duì)模塊加載結(jié)果操作。

語(yǔ)法為import(動(dòng)態(tài)加載的模塊路徑)

dynamic.js

function TestDy(){    console.log("這是動(dòng)態(tài)模塊")}export default TestDy

main.js

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

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)