學了一陣子 JavaScript 之後，我開始發現，能把功能寫出來，不代表我真的理解它，有時候是 AI 幫我寫好了程式碼，但我不太清楚它為什麼可以運作。

所以，我想找一個實際的 JavaScript 函式庫，直接從原始碼開始閱讀，看看裡面到底是如何使用 JavaScript，把基礎打得更扎實。

剛好課堂上接觸到 jQuery，於是我決定把 jQuery 4.0.0 當成這 30 天的研究對象。

jQuery 是什麼？

在開始閱讀原始碼之前，我只能先用一句話描述 jQuery：它是一個用 JavaScript 寫成的函式庫。

程式語言的世界好像有很多的函式庫，但我先來瞭解一下函式庫是什麼。

簡單來說：把複雜或常見的工作先封裝起來，讓其他程式可以直接重複使用。

例如大家剛開始學程式永遠都會說來練習寫個 BMI 計算機，但每算一次就要寫一次這段程式，非常麻煩。

const height = 170;
const weight = 65;

const bmi = weight / (height / 100) ** 2;

console.log(`你的 BMI 是 ${bmi.toFixed(1)}`);

這時候就可以自己寫一個函式：

function calculateBMI(height, weight) {
  return weight / (height / 100) ** 2;
}

const bmi = calculateBMI(170, 65);

console.log(`你的 BMI 是 ${bmi.toFixed(1)}`);

透過這個大家都練習過的例子，我可以先把函式庫理解成一組可重複使用的程式碼。像 calculateBMI 這樣的函式，整理在函式庫裡之後，其他程式就能直接呼叫，不必重新實作相同的計算邏輯。函式庫通常會包含許多類似的函式，目的是讓其他程式可以重複使用這些功能。

理解函式庫是什麼之後，我接著想知道：jQuery 又解決了什麼問題？

它把瀏覽器原本比較繁瑣的操作包裝成比較容易使用的 API，常見功能包括：

• 找到 DOM 元素
• 修改 HTML、文字、屬性和 CSS
• 綁定與處理事件
• 管理多個元素
• 發送 Ajax 請求
• 處理 callback 和非同步流程

也就是說，寫 JavaScript 時可以先載入 jQuery，再在自己的程式裡呼叫它提供的 API。我先拿按鈕做了一個很小的範例：載入函式庫之後，使用 $() 找到元素，再使用 .on() 註冊事件。

接著，我先從兩個基本操作開始比較：找到元素，以及註冊事件。不使用 jQuery 時，可以使用瀏覽器提供的 DOM API：

const button = document.querySelector("#button");

button.addEventListener("click", function () {
  console.log("按鈕被點擊了");
});

使用 jQuery 時，則可以寫成：

$("#button").on("click", function () {
  console.log("按鈕被點擊了");
});

同樣的功能，使用 jQuery 是不是簡化很多呢！

jQuery 不是一種新的程式語言，也不是瀏覽器本身，而是建立在 JavaScript 和瀏覽器 DOM API 上的工具函式庫。

這兩個操作使用的 API 不同：

document.querySelector("#button") 是瀏覽器提供的 DOM API，會回傳找到的那個原生 DOM 元素。
$("#button") 則是使用 jQuery 的 API，jQuery 會在內部使用瀏覽器提供的 DOM API 找到元素，再將它包裝成 jQuery object，並提供額外的方法讓我們操作這些元素。

addEventListener() 也是瀏覽器提供的原生事件 API，.on() 則是 jQuery 封裝的事件 API。

在找到元素時，querySelector() 會回傳原生 DOM 元素，而 $() 會回傳 jQuery object，因此後續可以使用的操作方式也不同。

所以 jQuery 的角色就是建立在原生 JavaScript 和 DOM API 上的一層封裝。

30 天的讀碼之旅

理解 jQuery 的基本用法之後，我會繼續研究：這些 API 到底是如何被實作出來的？

以我目前的程度來說，30 天可能讀不完所有原始碼，但我可以把每天讀到的程式碼和學到的概念記錄下來，整理成這 30 天的文章內容。

一個成熟的 JavaScript 函式庫，究竟是如何被組織和實作出來的？

也可以藉由這個過程，順便複習和釐清 JavaScript 還不懂的觀念和原理。