Day18——JavaScript模組基礎

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 18 篇

16th鐵人賽

姐姐恩

2024-10-13 21:00:11

54 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

JavaScript模組基礎

模組:指被單一程式切割而成的檔案。

每個檔案都有其獨立性。
模組之間溝通放是:輸出&輸入。(export:輸出；import:輸入。)

//預設輸出語法
expot default 變數名稱;

//預設輸入語法
import 變數名稱 from "模組檔案路徑";

使用JS的原生模組系統:要在script標籤中，加入type="module"。

程式碼練習&註解筆記:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript 模組基礎</title>
    </head>
    <body>
        <script type="module" src="main.js"></script>
    </body>
</html>

main.js

// import 資料 from 模組檔案的路徑
import lib from "./lib.js";
console.log(lib);
lib.echo("我是姐姐恩");
lib.add(3, 4);

//let name = "我又大又肥";
//echo(name);

lib.js

function echo(msg){
    console.log(msg); //印出:我是姐姐恩
}
//let name = "我是彭彭。"; 
//lib.js和main.js的物件是分開的，所以即使物件名稱相同也沒關係。
//let x= 3;
//export default 資料。
//export default x;

function add(n1, n2){
    console.log(n1+n2); //印出:7
}
export default {
    echo:echo, //方法名稱:方法對應的資料
    add:add
};

學習資源:
JavaScript Modules 模組基礎 - Front End 網頁前端工程教學