大家好，我是Karin。今天要來學習的內容是JavaScript中的Modules模組基礎。

學習內容來自：彭彭的教學影片
https://www.youtube.com/watch?v=wT9fKMLdPR4&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=30

Module模組是什麼

當把一個很龐大的程式切割成多個檔案，每一個程式檔案就稱為模組。

• 早期JS無模組支援能力，多使用第三方工具來操作(如Webpack)
• 現代的JS擁有完整的模組能力(又稱ES6 Module System)，可支援獨立的模組名稱空間、及export/import語法

JavaScript Modules使用方式

建立輸入輸出的關聯性

• 檔案名稱：lib.js

function echo(msg){
    console.log(msg);
}
export default echo; //export default 資料

• 檔案名稱：main.js(主程式)

import echo from "./lib.js"; //import 資料 from "模組檔案路徑"
let name="一個檔案";
echo(name);

• HTML中引入主程式檔案

<script type="module" src="main.js"></script>

模組的獨立性

模組有各自的命名空間，互相不受影響。

• 檔案名稱：lib.js

function echo(msg){
    consloe.log(msg);
}
let name="一個模組檔案";
echo(name);
export default echo; 

• 檔案名稱：main.js(主程式)

import echo from "./lib.js"; 
let name="一個檔案";
echo(name);

此範例表示不同模組檔案間，可以存在相同名稱的變數。代表著模組的獨立性。

明天來做實例練習(^._.^)ﾉ
祝大家中秋節快樂！