原名：PDQuickUI，自 0.6.0 版本起更名為 QuickUI
QuickUI 是一個純 JavaScript 開發的前端渲染框架。通過整合虛擬 DOM 技術提升渲染效能，實現快速的數據響應和自動更新。
核心特色
高效虛擬 DOM
- 透過精準的差異比對算法實現高效 DOM 更新
- 智慧屬性更新系統，只更新發生變化的值
- 智能子節點對比機制，最小化 DOM 操作
響應式數據處理
- 深度數據監控系統，確保數據變更即時反映
- 數據變更時自動更新 UI，無需手動操作
- 智慧緩存系統避免不必要的重複渲染
- 支援巢狀數據結構的響應式處理
進階模板功能
- 內建多語系（i18n）支援，輕鬆實現國際化
- 支援動態載入模板並非同步處理
- 強大的表達式系統，支援計算、日期和文字處理
- 完整的指令系統實現靈活的 DOM 操作
效能優化設計
- 圖片和 SVG 內容採用懶加載技術，提升載入速度
- 極小的檔案體積且無外部依賴
- 智慧事件委派和資源清理機制，優化記憶體使用
文件
安裝方式
從 npm 安裝
npm i @pardnchiu/quickui
從 CDN 引入
引入 QuickUI 套件
<!-- 0.6.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
<!-- 0.5.4 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
Module 版本
// 0.6.0 版本以上
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
// 0.5.4 版本以下
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
使用方法
初始化 QUI
const app = new QUI({
id: "", // 指定渲染元素
data: {
// 自訂 DATA
},
event: {
// 自訂 EVENT
},
when: {
before_render: function () {
// 停止渲染
},
rendered: function () {
// 已渲染
},
before_update: function () {
// 停止更新
},
updated: function () {
// 已更新
},
before_destroy: function () {
// 停止銷毀
},
destroyed: function () {
// 已銷毀
}
}
});
屬性概覽
文字與內容
| 屬性 |
使用場景 |
範例 |
{{ value }} |
動態文字內容 |
<p>{{ userName }}</p> 顯示使用者名稱 |
:html |
原始 HTML 插入 |
<div :html="richContent"></div> 渲染格式化內容 |
模板載入
| 屬性 |
使用場景 |
範例 |
:path |
外部模板載入 |
<temp :path="'./templates/header.html'"></temp> 載入頁首元件 |
列表與迭代
| 屬性 |
使用場景 |
範例 |
:for |
陣列/物件迭代 |
<li :for="item in items">{{ item.name }}</li> 渲染列表項目 |
條件渲染
| 屬性 |
使用場景 |
範例 |
:if |
條件顯示 |
<div :if="isLoggedIn">歡迎！</div> |
:else-if/:elif
|
次要條件 |
<div :elif="isPending">載入中...</div> |
:else |
預設內容 |
<div :else>請登入</div> |
表單綁定
| 屬性 |
使用場景 |
範例 |
:model |
雙向資料綁定 |
<input :model="userInput"> 與資料同步 |
樣式與動畫
| 屬性 |
使用場景 |
範例 |
:animation |
過渡效果 |
<div :animation="fade-in">內容</div> |
:[css] |
動態樣式 |
<div :background-color="bgColor">樣式內容</div> |
動態屬性
| 屬性 |
使用場景 |
範例 |
:[attr] |
動態屬性 |
<img :src="imageUrl" :alt="imageDesc"> |
事件處理
| 屬性 |
使用場景 |
範例 |
@[event] |
事件監聽器 |
<button @click="handleClick">點擊我</button> |
授權條款
本專案採用類 MIT 授權，但僅提供混淆後的程式碼：
- 與 MIT 相同：可自由使用、修改、再散布，包含商業用途
- 主要差異：預設僅提供混淆版程式碼，原始碼需另外購買
- 授權內容：必須保留原始版權聲明 (與 MIT 相同)
詳細條款與條件請參閱軟體使用協議。
開發者
邱敬幃
©️ 2023 邱敬幃 Pardn Chiu
Top comments (0)