pardnchiu/QuickUI

[!NOTE] 此 README 由 SKILL 生成，英文版請參閱這裡。

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

原生 JavaScript 前端框架，具備虛擬 DOM 差異更新、宣告式 HTML 模板與內建多語系切換

目錄

功能特點
架構
授權
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 監聽器]

授權

本專案採用 MIT LICENSE。

Author

Just open an issue to share an idea.

QuickUI contributors

©️ 2024 邱敬幃 Pardn Chiu

EN