目錄1. 瀏覽器支持2. export 導(dǎo)出模塊3. import 導(dǎo)入模塊4. 創(chuàng)建模塊對象5. export import 中轉(zhuǎn)站6. 動態(tài)加載模塊1. 瀏覽器支持

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

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

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

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

2. export 導(dǎo)出模塊

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

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

語法為export default 變量名

model.js

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

批量導(dǎo)出

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

function Test1(){ console.log('這是默認(rèn)導(dǎo)出')}function Test2(){ console.log(’這是命名導(dǎo)出’)}export {Test1, Test2}3. 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)鍵字跟一個新名字實現(xiàn)重命名

main.js

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

也可在導(dǎo)出時用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='http://www.leifengta.com.cn/bcjs/main.js'></script>4. 創(chuàng)建模塊對象

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

import * as Model from './model.js'Model.x1();Model.x2();5. export import 中轉(zhuǎn)站

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

語法為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='http://www.leifengta.com.cn/bcjs/main.js'></script>6. 動態(tài)加載模塊

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

語法為import(動態(tài)加載的模塊路徑)

dynamic.js

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

main.js

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

以上就是如何理解JavaScript模塊化的詳細(xì)內(nèi)容，更多關(guān)于JavaScript模塊化的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！