ES6 推出了管理 javascript 模組的語法,透過 import、export 可以將每個檔案視為獨立模組,讓檔案不會過於龐大,且可讀性也比較高,每個系統都有相對的模組,在程式碼的管理與組織方便了許多。
要在瀏覽器中運行,我們需先在 HTML 加上模組類型
1 | <script type="module"> |
這樣一來,就可以開始做模組管理了!
import & export
export 可以輸出任何類型的資料,如物件、函式與純值等,輸出又分為 default export、named export 兩種
import 是將 export 的檔案匯入,default export、named export 的輸入方式也稍微不太一樣,輸入的數量是沒有限制的
default export(預設匯出)
單一輸出名稱,預設使用 export default,每一個檔案只能有一個 export default
1.可以不指定變數名稱
1 | // export.js |
1 | import dog from "./export.js"; |
2.也可以指定變數名稱, import 裡的名稱可以
使用不同的名稱呼叫
🔸 預設單筆
1 | // export.js |
1 | import goodDog from "./export.js"; |
🔸 預設多筆
1 | // export.js |
1 | import goodDog from "./export.js"; |
named export(具名匯出)
多個輸出名稱,需先宣告名稱,在 import 時必須使用一樣名稱才能匯出,即使只匯出一個名稱也需加上中括號{}
1.export 每個宣告
1 | // export.js |
1 | import { dog } from "./export.js"; // 需加上中括號{} |
2.在結尾時統一使用物件匯出
1 | // export.js |
1 | import { dog } from "./export.js"; |
import/export 全部資料 使用*
*代表全部的意思,並賦予一個名稱,就可以呼叫你要的東西囉!
1 | // export.js |
1 | import * as myModule from "./export.js"; |
import 無需匯出的檔案
若想要單純執行某支檔案程式,則不用帶任何名稱引入即可
1 | import "/export.js"; |
有了 export 跟 import,程式碼可以被模組化,讓系統更好維護提升管理效率,
歡迎路過多多指教,一起學習程式吧 😀
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。