Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pardnchiu/pdquickui
網頁前端框架，支持條件／迴圈渲染、數據綁定、監聽資料變動與自動渲染等功能，並引入虛擬 DOM 技術，加速渲染效果。
https://github.com/pardnchiu/pdquickui
frontend-framework javascript-library
Last synced: 8 days ago
JSON representation
網頁前端框架，支持條件／迴圈渲染、數據綁定、監聽資料變動與自動渲染等功能，並引入虛擬 DOM 技術，加速渲染效果。
- Host: GitHub
- URL: https://github.com/pardnchiu/pdquickui
- Owner: pardnchiu
- License: mit
- Created: 2024-10-29T16:58:06.000Z (17 days ago)
- Default Branch: main
- Last Pushed: 2024-11-06T06:02:37.000Z (10 days ago)
- Last Synced: 2024-11-06T06:06:46.494Z (10 days ago)
- Topics: frontend-framework, javascript-library
- Language: JavaScript
- Homepage:
- Size: 635 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PDQuickUI
 
[](https://github.com/pardnchiu/PDQuickUI) [](https://www.npmjs.com/package/pdquickui) 
[](https://github.com/pardnchiu/PDQuickUI/blob/main/README.en.md)
`PDQuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。
透過引入虛擬 DOM 概念重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。
本專案移除了 `PDRenderKit` 中針對 `prototype` 的擴展，確保兼容性與效能，適合用於複雜的應用場景。
提供 `module` 和非 `module` 版本，授權從 `PDRenderKit` 的 `GPL-3.0` 更改為 `MIT`。
## 特點
- **清晰的架構**：UI 和資料邏輯分離，維護方便。
- **代碼簡潔**：減少重複代碼，提升可讀性。
- **自動渲染**：監控資料變動並自動更新，減少手動操作。
- **輕量化**：使用原生 JS 和內建 API 撰寫，無任何外部依賴。
## 安裝方式
- **從 npm 安裝**
```bash
npm i pdquickui
```
- **從 CDN 引入**
- **引入 `PDQuickUI` 套件**
```html
```
- **Module 版本**
```javascript
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
```
## 功能介紹
自動渲染：加載自動渲染在檢測到資料變更時自動重新渲染。
屬性概覽
| 屬性 | 描述 |
| --- | --- |
| `{{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` | 根據特定條件隱藏元素。 |
| `:animation` | 用於指定元素的過渡效果，如 `fade-in` 或 `expand`，以增強用戶體驗。 |
| `:mask` | 控制區塊載入時的動畫效果，支援 `true|false|1|0`，提升載入動態視覺效果。 |
| `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。
範例：`:id`、`:class`、`:src`、`:alt`、`:href`... |
| `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。
範例：`@click`、`@input`、`@mousedown`... |
屬性 {{value}}
- index.html
```HTML
{{ title }}
const app = new QUI({
id: "app",
data: {
title: "test"
}
});
```
- Result
```HTML
test
```
屬性 :html
- index.html
```HTML
const app = new QUI({
id: "app",
data: {
html: "<b>innerHtml</b>"
}
});
```
- Result
```HTML
innerHtml
```
屬性 :path
*確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。*
- test.html
```html
path heading
path content
```
- index.html
```html
const app = new QUI({
id: "app"
});
```
- Result
```html
path heading
path content
```
屬性 :for
- index.html
```html
- {{ item }} {{ CALC(index + 1) }}
const app = new QUI({
id: "app",
data: {
ary: ["test1", "test2", "test3"]
}
});
```
- Result
```html
```
多層 :for 嵌套
- index.html
```html
-
{{ key }}: {{ val.name }}
-
{{ item.name }}
-
{{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
-
-
const app = new QUI({
id: "app",
data: {
obj: {
food: {
name: "Food",
ary: [
{
name: 'Snacks',
ary1: [
{ name: 'Potato Chips', price: 10 },
{ name: 'Chocolate', price: 8 }
]
},
{
name: 'Beverages',
ary1: [
{ name: 'Juice', price: 5 },
{ name: 'Tea', price: 3 }
]
}
]
},
home: {
name: 'Home',
ary: [
{
name: 'Furniture',
ary1: [
{ name: 'Sofa', price: 300 },
{ name: 'Table', price: 150 }
]
},
{
name: 'Decorations',
ary1: [
{ name: 'Picture Frame', price: 20 },
{ name: 'Vase', price: 15 }
]
}
]
}
}
}
});
```
- Result
```html
- food: Food
- Snacks
- 1. Potato Chips - $10
- 2. Chocolate - $8
- Beverages
- 1. Juice - $5
- 2. Tea - $3
- Snacks
- home: Home
- Furniture
- 1. Sofa - $300
- 2. Table - $150
- Decorations
- 1. Picture Frame - $20
- 2. Vase - $15
- Furniture
```
屬性 :if/:else-if/:elif/:else
- index.html
```html
{{ title }} {{ heading }}
{{ title }} {{ heading }}
{{ title }} {{ heading }}
{{ title }} {{ heading }}
const app = new QUI({
id: "app",
data: {
heading: [Number|null],
isH2: [Boolean|null],
title: "test"
}
});
```
- 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
```
屬性 :model
- index.html
```html
test
const app = new QUI({
id: "app",
data: {
password: null,
},
event: {
show: function(e){
alert("Password:", app.data.password);
}
}
});
```
屬性 @[event]
- index.html
```html
test
const app = new QUI({
id: "app",
event: {
test: function(e){
alert(e.target.innerText + " clicked");
}
}
});
```
快速設置 CSS
`:padding`, `:margin`, `:border`, `:border-radius`, `:outline`, `:box-sahdow`, `:bg-image`, `:bg-attachment`, `:bg-blend-mode`, `:bg-clip`, `:bg-origin`, `:bg-position`, `:bg-position-x`, `:bg-position-y`, `:bg-repeat`, `:bg-size`, `:bg-color`, `:color`
可用函式
- `LENGTH()`:
- index.html
```HTML
Total: {{ LENGTH(array) }}
const app = new QUI({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
```
- result
```HTML
Total: 4
```
- `CALC()`:
- index.html
```HTML
calc: {{ CALC(num * 10) }}
const app = new QUI({
id: "app",
data: {
num: 1
}
});
```
- result
```HTML
calc: 10
```
- `UPPER()` / `LOWER()`
- index.html
```HTML
{{ UPPER(test1) }} {{ LOWER(test2) }}
const app = new QUI({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
```
- result
```HTML
UPPER lower
```
- `DATE(num, format)`:
- index.html
```HTML
{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
const app = new QUI({
id: "app",
data: {
now: Math.floor(Date.now() / 1000)
}
});
```
- result
```HTML
2024-08-17 03:40:47
```
資料獲取
```html
測試
const app = new QUI({
id: "app",
data: {
// 給 input 綁定的值
test: 123
},
event: {
get: _ => {
// 點擊時彈出內容為 test 值的通知
alert(app.data.test);
}
}
});
```
模板渲染
- index.html
```HTML
const test = new QUI({
id: "app",
data: {
hint: "hint 123",
title: "test 123"
},
render: () => {
return `
"{{ hint }}",
h1 {
style: "background: red;",
children: [
"{{ title }}"
]
}`
}
})
```
- Result
```HTML
hint 123
test 123
```
生命週期
```html
const app = new QUI({
id: "app",
when: {
before_mount: function () {
// 停止渲染
// retuen false
},
mounted: function () {
console.log("已掛載");
},
before_update: function () {
// 停止更新
// retuen false
},
updated: function () {
console.log("已更新");
},
before_destroy: function () {
// 停止銷毀
// retuen false
},
destroyed: function () {
console.log("已銷毀");
}
}
});
```
可選設定
- test.svg
```XML
```
- index.html
```html
const app = new QUI({
id: "app",
data: {
svg: "test.svg",
image: "test.jpg"
},
option: {
lazyload: true, // 圖片延遲加載: true|false (預設: true)
svg: true // SVG 檔案轉換: true|false (預設: true)
}
});
```
- result
```html
```
## 開發者
邱敬幃 Pardn Chiu
[](mailto:[email protected]) [](https://linkedin.com/in/pardnchiu)
## 授權條款
本專案依據 [MIT](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE) 授權使用。
***
©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)