Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

ES6-import & export 怎麼用

Imgur

ES6 推出了管理 javascript 模組的語法,透過 import、export 可以將每個檔案視為獨立模組,讓檔案不會過於龐大,且可讀性也比較高,每個系統都有相對的模組,在程式碼的管理與組織方便了許多。

要在瀏覽器中運行,我們需先在 HTML 加上模組類型

1
2
3
<script type="module">
// import要匯入的檔案
</script>

這樣一來,就可以開始做模組管理了!

import & export

export 可以輸出任何類型的資料,如物件、函式與純值等,輸出又分為 default export、named export 兩種
import 是將 export 的檔案匯入,default export、named export 的輸入方式也稍微不太一樣,輸入的數量是沒有限制的


default export(預設匯出)

單一輸出名稱,預設使用 export default,每一個檔案只能有一個 export default

1.可以不指定變數名稱

1
2
3
4
5
6
// export.js
export default {
name: "bobee",
age: 11,
bark: "woof",
};
1
2
import dog from "./export.js";
console.log(dog.name); // bobee

2.也可以指定變數名稱, import 裡的名稱可以使用不同的名稱呼叫

🔸 預設單筆

1
2
3
4
5
6
7
// export.js
const dog = {
name: "bobee",
age: 11,
bark: "woof",
};
export default dog;
1
2
import goodDog from "./export.js";
console.log(goodDog.name); // bobee

🔸 預設多筆

1
2
3
4
5
6
7
8
9
10
// export.js
const dog = {
name: "bobee",
age: 11,
bark: "woof",
};
function add(a, b) {
return a + b;
}
export default { dog, add };
1
2
import goodDog from "./export.js";
console.log(goodDog.dog.name); // bobee

named export(具名匯出)

多個輸出名稱,需先宣告名稱,在 import 時必須使用一樣名稱才能匯出,即使只匯出一個名稱也需加上中括號{}

1.export 每個宣告

1
2
3
4
5
6
7
8
9
// export.js
export const dog = {
name: "bobee",
age: 11,
bark: "woof",
};
export function add(a, b) {
return a + b;
}
1
2
import { dog } from "./export.js"; // 需加上中括號{}
console.log(dog.name); // bobee

2.在結尾時統一使用物件匯出

1
2
3
4
5
6
7
8
9
10
// export.js
const dog = {
name: "bobee",
age: 11,
bark: "woof",
};
function add(a, b) {
return a + b;
}
export { dog, add };
1
2
import { dog } from "./export.js";
console.log(dog.name); // bobee

import/export 全部資料 使用*

*代表全部的意思,並賦予一個名稱,就可以呼叫你要的東西囉!

1
2
3
4
5
6
7
8
9
10
// export.js
const dog = {
name: "bobee",
age: 11,
bark: "woof",
};
function add(a, b) {
return a + b;
}
export { dog, add };
1
2
import * as myModule from "./export.js";
console.log(myModule.dog.name); // bobee

import 無需匯出的檔案

若想要單純執行某支檔案程式,則不用帶任何名稱引入即可

1
import "/export.js";

有了 export 跟 import,程式碼可以被模組化,讓系統更好維護提升管理效率,
歡迎路過多多指教,一起學習程式吧 😀




🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程
想學習更多關於前後端的線上課程,可以參考看看。

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️