Mador：僅 855 位元組的極簡 DOM 反應式綁定庫

Mador：僅 855 位元組的極簡 DOM 反應式綁定庫

Mador 是一套只提供「反應式狀態」與「將狀態綁定至現有 DOM」的工具。它以原生 ES 模組形式發佈，可透過 npm 安裝或直接從 CDN 引入，無需全域執行環境或建置步驟。整體執行時程式碼在 855 位元組（最小化後），因此被稱為「極簡」——沒有元件、模板，也不使用 Virtual DOM（虛擬 DOM），只操作你已寫好的 HTML。

核心機制

1. selector：選取欲更新的元素（如 CSS selector）。

2. read：宣告此綁定依賴的狀態欄位，Mador 會追蹤這些欄位的讀取。

3. update：收到每個被選元素與 read 回傳的值後，執行實際的 DOM 更新。

Mador 只在 read 所依賴的屬性變動時重新執行 update，因此寫入（w）的變更會被批次處理，單次寫入內的多筆變更會一次性完成，降低不必要的重繪。

為何需要這樣的極簡庫

• 不想導入完整框架：許多靜態頁面已具備完整的 HTML 與 JavaScript，只缺少少量的即時互動。Mador 讓開發者在不改變既有結構的前提下，快速加入反應式行為。
• 效能與體積：相較於 React、Vue 等需要虛擬 DOM 與大量抽象層的框架，Mador 的 855 位元組體積幾乎不會對載入時間產生影響，且直接操作真實 DOM，省去虛擬層的比對成本。
• 自動回收：當 selector 找不到相符元素（例如元素被移除），Mador 會自動撤除對應的反應式執行者，避免記憶體洩漏，且不必手動管理元件生命週期。

未來展望與使用建議

Mador 的定位是「讓任何 DOM 變成反應式」的最小化解決方案。對於 單頁小工具、表單即時驗證、簡易儀表板 等需求，它已足夠。若未來需要更複雜的狀態管理或路由功能，仍可在 Mador 之上自行擴充或搭配其他庫使用。開發者在導入時，只需在 <script type="module"> 中 import { w, bind } from 'https://cdn.jsdelivr.net/.../mador.js'，即可立即開始編寫 bind({ selector: '.count', read: () => state.count, update: (el, v) => el.textContent = v }) 之類的簡潔綁定。

總結來說，Mador 以 「極簡」+「即時」 的組合，提供了在不改寫整體架構的情況下，為現有 DOM 注入反應式能力的可能。對於追求載入速度、維護成本低的前端專案，它是一個值得關注的選項。