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