網站多套 Header 元件整合與重構策略

問題背景

專案中存在多個外觀相似但細節不同的 Header（導覽列），導致 CSS/JS 重複、維護困難。每新增一個功能，都需在多份 Header 代碼中同步修改。

整合思路

1. 抽離共用結構：將共同的 HTML 骨架（Logo、主選單、搜尋框）提煉為單一元件/模板。
2. 參數化差異點：將變動部分（如次選單、用戶狀態、語言切換）設計為可配置的 Props/Slots/區塊。
3. 樣式模組化：採用 BEM 或 CSS Modules，將共用樣式抽至 header-base.css，差異樣式以 Modifier 或獨立檔案載入。
4. JS 行為解耦：共用互動（下拉選單、手機版漢堡選單）寫成可複用模組，差異行為透過事件或配置注入。

實作範例 (以 Vue 3 組合式 API 為例)

<!-- HeaderBase.vue -->
<template>
  <header class="header-base">
    <div class="logo"><slot name="logo">預設 Logo</slot></div>
    <nav class="main-nav"><slot name="main-nav"></slot></nav>
    <div class="actions"><slot name="actions"></slot></div>
  </header>
</template>

<script setup>
defineProps(['variant']) // 如 'home', 'admin', 'mobile'
</script>

<style module>
.header-base { display:flex; align-items:center; padding:0 20px; }
.logo { flex:1; }
.main-nav { /* 共用導覽樣式 */ }
.actions { /* 右側動作區 */ }
</style>

<!-- 具體頁面使用 -->
<HeaderBase variant="admin">
  <template #logo><AdminLogo /></template>
  <template #main-nav><AdminNav /></template>
  <template #actions><UserMenu /></template>
</HeaderBase>

非框架專案的替代方案

• Server-side Includes (SSI)：<!--# include virtual="/partials/header.html" -->
• 模板引擎：如 EJS、Pug、Twig，定義 header 區塊並延伸。
• Web Components：自訂 <app-header> 元素，Shadow DOM 隔離樣式。

重構檢查清單

• [ ] 所有 Header 共用同一個 HTML 骨架檔案
• [ ] CSS 無重複規則，差異透過 Modifier 控制
• [ ] JS 無重複邏輯，共用模組化
• [ ] 新增 Header 只需新增一個「變異配置」而非複製整份代碼

結語

Header 整合的核心是「找出共同點，參數化差異點」。透過元件化或模板化，能將維護成本從 O(N) 降為 O(1)。