pardnchiu/QuickUI

最後更新 2026-10-30

Note此 README 由 SKILL 生成，英文版請參閱 這裡。

A ZERO-DEPENDENCY VIRTUAL DOM FRAMEWORK THAT RUNS WITHOUT A BUILD STEP

JavaScript 前端框架，具備虛擬 DOM 差異更新、HTML 模板資料綁定與執行期 i18n

目錄

• 功能特點
• 架構
• 授權
• Author

功能特點

npm i @pardnchiu/quickui · 完整文件

• 零相依免建置 — 以瀏覽器原生 API 實作虛擬 DOM（Virtual DOM）的 Diff／Patch，一個 script 標籤即可在既有頁面上使用。
• 宣告式 HTML 模板 — 資料插值、迴圈、條件分支、雙向綁定與事件綁定直接寫在 HTML 屬性上，模板即是頁面本身。
• Proxy 響應式批次更新 — 深層資料變動自動觸發 300ms 防抖更新，並於下一個動畫影格只套用必要的 DOM 差異。
• 執行期 i18n 切換 — 語系可直接給物件或 JSON 檔網址，呼叫一次語系切換即重新渲染文字與屬性。
• 內建圖片懶載入與 SVG 內嵌 — 以 IntersectionObserver 延遲載入圖片並附載入動畫，外部 SVG 檔進入視窗時自動內嵌為可上色的節點。

架構

完整架構

graph TB
    A[HTML 模板 / render 函式] --> B[vDOM 建構]
    D[Proxy 響應式資料] -->|變動 300ms 防抖| B
    E[i18n 語系資料] --> B
    B --> C[Diff 產生 Patch]
    C -->|requestAnimationFrame| F[真實 DOM]
    G[生命週期鉤子] -.-> B
    F --> H[懶載入 / SVG 監聽器]

graph TB
    A[HTML 模板 / render 函式] --> B[vDOM 建構]
    D[Proxy 響應式資料] -->|變動 300ms 防抖| B
    E[i18n 語系資料] --> B
    B --> C[Diff 產生 Patch]
    C -->|requestAnimationFrame| F[真實 DOM]
    G[生命週期鉤子] -.-> B
    F --> H[懶載入 / SVG 監聽器]

授權

Author