瀏覽器實作ES模組練習

發表於 更新於 分類於 閱讀次數： Disqus：

不知道是什麼時候看到的，說是瀏覽器已經有支援ES6的模組了，蝦咪。那我是不是趕緊投入ES6的懷抱，然後推坑同事呢？趕緊來練習一下

既然只是個練習，那就是動手做做看囉，題目當然就是萬年不變的兩數相加計算。在頁面上拉兩個Input擺放文字輸入框，放一個按鈕觸發事件。事件內容就是從頁面上抓值，然後把它加起來之後顯示在畫面上。

設計一個Calculator，裡面包含了加法跟減法兩個module，接著index.js去呼叫Calculator進行運算。

練習的部分因為僅針對module做練習，其他地方就沒有太多著墨。稍微查詢了一下原來這個在Chrome版本61就開始支援了，現在版本都已經到66了。既然Chrome、FireFox跟Safari，連IE Edge都已經跟上了，如果還不熟悉這東西的話可能網頁工程師這個title會掛的有點心虛啊。

練習的過程中，這篇ECMAScript modules in browsers還蠻有幫助的，也順便推薦一下囉。

照慣例，小練習要附上程式碼。

整個目錄結構是這樣子的

1
2
3
4
5
6
7
8
9
10
11
// add.js
export default function add(a, b) { return a + b; }

// sub.js
export default function sub(a, b) { return a - b; }

// calculator.js
import add from "./calculator/add.js";
import sub from "./calculator/sub.js";

export { add, sub };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--index.html-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="text" name="num1" id="num1" value=1> +
    <input type="text" name="num2" id="num2" value=2> =
    <span id="ans">0</span>
    <input type="button" id="btnAdd" value="Add">

    <script src="./index.js" type="module"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//index.js
import * as calculator from "./module/calculator.js"

(() => {

    let ans = document.querySelector("#ans")
    let btn = document.querySelector("#btnAdd")

    let handleBtnAdd = () => {
        let num1 = document.querySelector("#num1")
        let num2 = document.querySelector("#num2")
        let val1 = parseInt(num1.value, 10)
        let val2 = parseInt(num2.value, 10)
        let result = calculator.add(val1, val2)
        ans.innerHTML = result
    }

    btn.addEventListener("click", handleBtnAdd)

})()