JS 模塊化語法 import、export詳解
背景
1. 為什么需要模塊化：
隨著項(xiàng)目越來越龐大, 通常喜歡將膨脹的 JS 代碼按功能劃分, 把其抽離成一個(gè)個(gè)單獨(dú)的 JS 文件, 并且只暴露想對外提供的方法和屬性,其他都是私有, 這樣的 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)對象
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)出的模塊
因?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)對象
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)對象
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)文章希望大家以后多多支持腳本之家！
- 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)文章
這篇文章主要為大家詳細(xì)介紹了js模塊加載方式的初級學(xué)習(xí)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。2010-11-11
前面我們學(xué)習(xí)了jQuery的方式開發(fā)插件，講訴的都是些基礎(chǔ)的理論知識，今天開始，我們就來實(shí)戰(zhàn)一下，學(xué)習(xí)開發(fā)自己的插件庫。2015-01-01
今天小編就為大家分享一篇解決JavaScript layui 下拉框不顯示的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript利用Date實(shí)現(xiàn)簡單的倒計(jì)時(shí)實(shí)例
在日常開發(fā)的時(shí)候經(jīng)常遇到關(guān)于倒計(jì)時(shí)的需求，下面這篇文章就給主要介紹了JavaScript利用Date實(shí)現(xiàn)倒計(jì)時(shí)效果的方法示例，文中主要實(shí)現(xiàn)了倒計(jì)時(shí)和倒計(jì)時(shí)結(jié)束搶購的按鈕才可以被點(diǎn)擊的效果，有需要的朋友可以參考借鑒。2017-01-01
下面小編就為大家?guī)硪黄獪\談js中對象的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
如何在js中動(dòng)態(tài)修改元素的class屬性
在JavaScript中動(dòng)態(tài)修改CSS樣式是一種常見的操作,它允許開發(fā)者根據(jù)不同的條件或者用戶的交互來改變網(wǎng)頁的外觀,這篇文章主要介紹了如何在js中動(dòng)態(tài)修改元素的class屬性的相關(guān)資料,需要的朋友可以參考下2025-04-04
JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過運(yùn)算與動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
JavaScript獲取與設(shè)置表單值的實(shí)現(xiàn)方法
表單是網(wǎng)頁中交互的一部分,而通過 JavaScript 獲取和設(shè)置表單值,不僅能夠讓你在提交前對數(shù)據(jù)進(jìn)行驗(yàn)證和處理,還能實(shí)現(xiàn)動(dòng)態(tài)更新表單內(nèi)容,在本文中,我們將詳細(xì)介紹如何使用 JavaScript 獲取和設(shè)置不同類型的表單控件的值,需要的朋友可以參考下2025-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購物車商品數(shù)量加減，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09