昨天我們學會用 DOM 操控網頁、驗證表單，體驗到「用程式和使用者對話」的感覺~
今天，我們要往「更專業的前端開發」邁進，--元件化思維（Component Thinking）--，以及開發中很常用的技巧：--事件委派（Event Delegation）--。

為什麼要元件化？

一個電商網站，通常會有幾個商品卡片，內容大同小異：圖片、標題、價格、購物車按鈕......

如果用昨天的方法，一張一張卡片手動寫 DOM、再一個一個綁定事件，程式碼會變得：

• 重複、難維護
• 想修改一個地方，要改 n 次

元件化的概念，就是把「重複的東西」抽成一個「模組」
EX：

• HTML 模板：卡片結構
• CSS Class：樣式統一
• JS 函式：建立、更新、綁定事件

1. 用 JS 生成「商品卡片」元件

HTML
<div id="productList"></div>
JS

// 資料
const products = [
  { name: '無線滑鼠', price: 450 },
  { name: '機械鍵盤', price: 2200 },
  { name: '藍牙耳機', price: 1800 }
];

// 建立一張卡片
function createProductCard(product) {
  const card = document.createElement('div');
  card.classList.add('product-card');

  card.innerHTML = `
    <h3>${product.name}</h3>
    <p>$${product.price}</p>
    <button class="add-to-cart">加入購物車</button>
  `;

  return card;
}

// 渲染到網頁
const list = document.getElementById('productList');
products.forEach(p => list.appendChild(createProductCard(p)));

這樣，未來只要新增商品資料，就能自動生成卡片，不用重複寫 DOM~

2. 事件委派：處理大量按鈕點擊的好方法

如果每個「加入購物車」按鈕都個別綁 addEventListener，當產品數量變多、或動態新增時，就麻煩了

事件委派的作法：

• 把事件綁在「父元素」上
• 利用 event.target 來判斷點擊來源

list.addEventListener('click', (e) => {
  if (e.target.classList.contains('add-to-cart')) {
    const productName = e.target.parentElement.querySelector('h3').textContent;
    alert(`${productName} 已加入購物車！`);
  }
});

好處：

1. 減少綁定事件的數量
2. 動態新增的卡片也能自動有事件
3. 更好維護、效能更佳

3. 元件化與框架的關聯

這樣做會更容易理解前端框架（React、Vue）：

• React 的「Component」就是這樣的想法，只是它讓 HTML、CSS、JS 打包在一起
• Vue 的「v-for」也是用資料去生成畫面
  當理解元件化與事件委派，未來的框架學習會更順暢。

學習心得

專業的前端很像「組積木」：

• 資料是積木零件
• 元件是積木模組
• 事件委派讓整個積木能動起來

寫的時候卡在事件委派的 target，一直抓不到正確的元素，debug 了半天才發現是 class 名字拼錯，還不止一次發生，真是會笑死。
但這也讓我體會到，前端不只是要會寫語法，還要有組織、規劃思維，才能更好的運用、打造好一個網頁。