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