# QuickUI *(原名：PDQuickUI，自 `0.6.0` 版本起更名為 QuickUI)* ![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![size](https://img.shields.io/github/size/pardnchiu/QuickUI/dist%2FQuickUI.js) ![license](https://img.shields.io/github/license/pardnchiu/QuickUI)
[![npm](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) [![download](https://img.shields.io/npm/dm/pdquickui)](https://www.npmjs.com/package/pdquickui) [![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/pdquickui)](https://www.jsdelivr.com/package/npm/pdquickui)
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/QuickUI/blob/main/README.en.md) `QuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。
透過引入虛擬 DOM 概念重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。
本專案移除了 `PDRenderKit` 中針對 `prototype` 的擴展，確保兼容性與效能，適合用於複雜的應用場景。
提供 `module` 和非 `module` 版本，授權從 `PDRenderKit` 的 `GPL-3.0` 更改為 `MIT`。
## 特點 - **清晰的架構**：UI 和資料邏輯分離，維護方便。 - **代碼簡潔**：減少重複代碼，提升可讀性。 - **自動渲染**：監控資料變動並自動更新，減少手動操作。 - **輕量化**：使用原生 JS 和內建 API 撰寫，無任何外部依賴。 ## 安裝方式 - 從 npm 安裝 ```bash npm i @pardnchiu/quickui ``` - 從 CDN 引入 - **引入 `QuickUI` 套件** ```html ``` - **Module 版本** ```javascript // Version 0.6.0 and above import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js"; // Version 0.5.4 and below import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js"; ``` ## 使用方法 - **初始化 `QUI`** ```Javascript 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}}` | 將文字插入到 HTML 標籤中，並隨資料變更自動更新。 | | `:path` | 搭配 `temp` 標籤，用於將外部文件中的 HTML 片段加載到當前頁面。 | | `:html` | 使用文本替換元素的 `innerHTML`。 | | `:for` | 支援 `item in items`、`(item, index) in items`、`(key, value) in object` 格式，遍歷資料集合，生成對應的 HTML 元素。 | | `:if`
`:else-if`
`:elif`
`:else` | 根據條件顯示或隱藏元素，實現分支邏輯。 | | `:model` | 將資料綁定到表單元素（如 `input`），當輸入變更時自動更新資料。 | | `:hide` | 根據特定條件隱藏元素。 | | `:effect` | 用於指定元素的過渡效果，如 `fade-in` 或 `expand`，以增強用戶體驗。 | | `:mask` | 控制區塊載入時的動畫效果，支援 `true|false|1|0`，提升載入動態視覺效果。 | | `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。
範例：`:id`、`:class`、`:src`、`:alt`、`:href`... | | `:[css]` | 設定元素CSS，例如 `margin`、`padding` 等。
範例：`:background-color`、`:opacity`、`:margin`、`:top`、`:position`... | | `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。
範例：`@click`、`@input`、`@mousedown`... |
文字替換 ### `{{value}}` - index.html ```HTML

{{ title }}

``` - Result ```HTML

test

``` *** ### `:html` - index.html ```HTML
``` - Result ```HTML
innerHtml
```
插入區塊 > [!NOTE] > 確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。 ### `:path` - test.html ```html

path heading

path content

``` - index.html ```html ``` - Result ```html

path heading

path content

```
迴圈渲染 ### `:for` - index.html ```html ``` - Result ```html
  • test1 1
  • test2 2
  • test3 3
    • ``` *** ### 巢狀迴圈 - index.html ```html ``` - Result ```html ```
    條件渲染 - index.html ```html

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    ``` - Result: `heading = 1` ```html

    test 1

    ``` - Result: `heading = null && isH2 = true` ```html

    test

    ``` - Result: `heading = 3 && isH2 = null` ```html

    test 3

    ``` - Result: `heading = null && isH2 = null` ```html

    test

    ```
    模板渲染 - index.html ```HTML ``` - result ```HTML hint 123

    test 123

    ```
    雙向綁定 ```html ```
    事件偵測 ```html ```
    CSS設置 > [!NOTE] > 支援 `:[CSS屬性]` 的簡易設定方式，直接將資料綁定到樣式屬性。 - index.html ```html ``` - Result: ```html ```
    可用函式 ### `LENGTH()` - index.html ```HTML

    Total: {{ LENGTH(array) }}

    ``` - result ```HTML

    Total: 4

    ``` *** ### `CALC()` - index.html ```HTML

    calc: {{ CALC(num * 10) }}

    ``` - result ```HTML

    calc: 10

    ``` *** ### `UPPER()` / `LOWER()` - index.html ```HTML

    {{ UPPER(test1) }} {{ LOWER(test2) }}

    ``` - result ```HTML

    UPPER lower

    ``` *** ### `DATE(num, format)` - index.html ```HTML

    {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}

    ``` - result ```HTML

    2024-08-17 03:40:47

    ```
    懶加載 ### `:lazyload` - index.html ```html ``` - result ```html ``` *** ### `SVG` 替換 - test.svg ```XML ``` - index.html ```html ``` - result ```html ```
    多國語言 > [!NOTE] > 若為物件格式，直接配置多語言內容。 > 若為字串格式，會透過 `fetch` 動態載入語言檔案。 - en.json ```JSON { "greeting": "Hello", "username": "Username" } ``` - index.html ```html

    {{ i18n.greeting }}, {{ i18n.username }}: {{ username }}

    ``` - result `i18nLang = zh` ```html

    你好, 用戶名: 帕登

    ``` - result `i18nLang = en` ```html

    Hello, Username: 帕登

    ```
    生命週期 ```html ```
    資料獲取 ```html ```
    ## 開發者

    邱敬幃 Pardn Chiu

    [![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu) ## 授權條款 本專案依據 [MIT](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE) 授權使用。 ## 獲取完整原始碼 [聯絡我](mailto:dev@pardn.io) 獲取完整未混淆源碼
    可隨意修改、商業使用，根據需求選擇授權版本： - 需保留 `Powered by @pardnchiu/quickui` 的版權聲明：$7,500 - 完全自主，無需添加版權聲明：$10,000 *** ©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)