JS 模塊化語法 import、export詳解
背景
1. 為什么需要模塊化：
隨著項目越來越龐大, 通常喜歡將膨脹的 JS 代碼按功能劃分, 把其抽離成一個個單獨的 JS 文件, 并且只暴露想對外提供的方法和屬性,其他都是私有, 這樣的 JS 文件稱為一個模塊, 模塊內(nèi)只做盡量少的事, 來滿足單一原則, 從而提高代碼的復(fù)用性, 可讀性和可維護性。
2. 早期模塊化帶來的問題：
模塊化項目中, 經(jīng)常需要引入多個 JS 模塊來拼裝出最后的效果, 但是 ES6 以前只有全局作用域, 所以多個模塊內(nèi)變量名容易互相沖突,而且多個模塊間想確定依賴關(guān)系也很困難, 容易導(dǎo)致引入順序錯誤
3. 在 ES6 模塊化到來之前, 為了解決早期模塊化帶來的問題, 也有許多開源的模塊化規(guī)范, 如：
- CommonJS規(guī)范, 具體實現(xiàn)是 NodeJs, 常在服務(wù)端使用
- AMD規(guī)范, 具體實現(xiàn)是 require.js, 常在瀏覽器端使用
- CMD規(guī)范, 具體實現(xiàn)是 sea.js, 常在瀏覽器端使用
雖然有開源的模塊化規(guī)范來解決模塊化帶來的問題, 但是由于規(guī)范種類較多, 所以學(xué)習(xí)代價也更大。
ES6 模塊化
官方的標(biāo)準(zhǔn)模塊化規(guī)范, 通過 import 和 export 導(dǎo)入導(dǎo)出模塊內(nèi)的成員, 未被導(dǎo)出的成員, 無法導(dǎo)入使用。
1. JS 文件內(nèi)導(dǎo)出 export
(1) 分別導(dǎo)出：
/* module.js */
// 導(dǎo)出 foo 和 bar
export let foo = 'foo'
export let bar = () => {
console.log('bar')
}(2) 統(tǒng)一導(dǎo)出：
/* module.js */
let foo = 'foo'
let bar = () => {
console.log('bar')
}
// 導(dǎo)出 foo 和 bar
export { foo, bar }(3) 默認(rèn)導(dǎo)出（一個模塊化文件中只能有一個默認(rèn)導(dǎo)出）：
/* module.js */
// 導(dǎo)出默認(rèn)對象
export default {
foo: 'foo',
bar() {
console.log('bar')
}
}2. JS 文件內(nèi)導(dǎo)入 import
(1) 普通導(dǎo)入：
import * as importData from "./module.js" console.log(importData.foo) // 結(jié)果：foo importData.bar() // 結(jié)果：bar
(2) 對象解構(gòu)語法導(dǎo)入
解構(gòu)名稱形式：
import { foo, bar } from "./module.js"
console.log(foo) // 結(jié)果：foo
bar() // 結(jié)果：bar別名形式：
import { foo as importFoo, bar as importBar } from "./module.js"
console.log(importFoo) // 結(jié)果：foo
importBar() // 結(jié)果：bar(3) 導(dǎo)入默認(rèn)導(dǎo)出的模塊
因為默認(rèn)導(dǎo)出模塊, 在導(dǎo)出時是沒有指定名稱的, 所以這里要給個別名：
import { default as alias } from "./module.js";
console.log(alias.foo) // 結(jié)果：foo
alias.bar() // 結(jié)果：bar別名簡寫：
import alias from "./module.js"; console.log(alias.foo) // 結(jié)果：foo alias.bar() // 結(jié)果：bar
3. script 標(biāo)簽內(nèi)使用
(1) 在 <script> 標(biāo)簽內(nèi), 使用 import 和 export 關(guān)鍵字時, 標(biāo)簽要加上 type = “module” 屬性
/* module.js */
// 導(dǎo)出默認(rèn)對象
export default {
foo: 'foo',
bar() {
console.log('bar')
}
}<!-- index.html -->
<script type="module">
import alias from "./module.js";
console.log(alias.foo) // 結(jié)果：foo
alias.bar() // 結(jié)果：bar
</script>(2) 用 <script> 標(biāo)簽, 引入 JS 文件時, 如果 JS 文件內(nèi)使用了 import 和 export 關(guān)鍵字, 那么標(biāo)簽要加上 type = “module” 屬性
/* module.js */
// 導(dǎo)出默認(rèn)對象
export default {
foo: 'foo',
bar() {
console.log('bar')
}
}/* index.js */ // 導(dǎo)入默認(rèn)對象 import alias from './module.js' console.log(alias.foo) // 結(jié)果：foo alias.bar() // 結(jié)果：bar
<!-- index.html --> <script type="module" src="./index.js"></script>
到此這篇關(guān)于JS 模塊化語法 import、export詳解的文章就介紹到這了,更多相關(guān)JS 模塊化 import export內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript中this指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序中獲取設(shè)備信息的相關(guān)資料,微信小程序是一種在微信平臺上運行的應(yīng)用程序,它具有輕量化、便捷性和高兼容性的特點,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
如何用JS實現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
這篇文章主要介紹了如何用JS實現(xiàn)簡單的數(shù)據(jù)監(jiān)聽，對數(shù)據(jù)監(jiān)聽感興趣的同學(xué)，可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)隨機點名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
中國這么大，要在一張小小地圖上畫上中國，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此。本文就來和大家聊聊D3中的比例尺的繪制與使用，感興趣的可以學(xué)習(xí)一下2022-11-11
這篇文章主要介紹了element-ui?動態(tài)換膚,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
電影院選座基本上每個人都用到過，本文主要介紹了JS實現(xiàn)電影票選座的項目示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)輪播圖小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
今天小編就為大家分享一篇關(guān)于15個頂級開源JavaScript框架和庫的文章，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10