Skip to content

Commit 5a76e8b

Browse files
pardnchiupardnchiu
committed
新增 render 參數，使用模板語法可以動態插入 HTML 內容，類似於使用 :html 動態插入 innerHTML。
1 parent 261713b commit 5a76e8b

10 files changed

Lines changed: 132 additions & 21 deletions

File tree

‎DEPRECATION.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
## 預計 `1.*.*` 移除
2+
3+
- 所有的生命週期方法需要移動至 `when` 值中。確保代碼一致性和可維護性。
4+
- `lifecycle` 對象：任何使用 `lifecycle` 對象定義生命週期方法的方式將被去除。
5+
- 獨立定義的生命週期方法：所有在 `QUI` 對象中直接定義的生命週期方法（例如，`before_render` 等）都將不再被支持。
6+
從以下寫法：
7+
```JavaScript
8+
const app = new QUI({
9+
lifecycle: {
10+
before_render: _ => {
11+
console.log("準備渲染")
12+
},
13+
},
14+
before_render: _ => {
15+
console.log("準備渲染")
16+
}
17+
});
18+
```
19+
改為：
20+
```JavaScript
21+
const app = new QUI({
22+
when: {
23+
before_render: _ => {
24+
console.log("準備渲染")
25+
},
26+
}
27+
});
28+
```

‎README.md‎

Lines changed: 61 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDQuickUI/blob/main/README.en.md)
66

77
`PDQuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。<br>
8-
透過引入虛擬 DOM 重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。<br>
8+
透過引入虛擬 DOM 概念重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。<br>
99

1010
本專案移除了 `PDRenderKit` 中針對 `prototype` 的擴展，確保兼容性與效能，適合用於複雜的應用場景。<br>
1111
提供 `module` 和非 `module` 版本，授權從 `PDRenderKit` 的 `GPL-3.0` 更改為 `MIT`。<br>
@@ -50,7 +50,6 @@
5050
| `:hide` | 根據特定條件隱藏元素。 |
5151
| `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。<br>範例：`:id`、`:class`、`:src`、`:alt`、`:href`... |
5252
| `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。<br>範例：`@click`、`@input`、`@mousedown`... |
53-
| `:@[event]` | 用於 `:for` 內單個元素的事件處理，允許每個元素設置不同的事件處理。 |
5453
5554
</details>
5655
@@ -461,7 +460,7 @@
461460
const app = new QUI({
462461
id: "app",
463462
data: {
464-
now: $Math.floor(Date.now() / 1000)
463+
now: Math.floor(Date.now() / 1000)
465464
}
466465
});
467466
</script>
@@ -502,6 +501,42 @@
502501
503502
</details>
504503
504+
<details>
505+
<summary>模板渲染</summary>
506+
507+
- index.html
508+
```HTML
509+
<body id="app"></body>
510+
<script>
511+
const test = new QUI({
512+
id: "app",
513+
data: {
514+
hint: "hint 123",
515+
title: "test 123"
516+
},
517+
render: () => {
518+
return `
519+
"{{ hint }}",
520+
h1 {
521+
style: "background: red;",
522+
children: [
523+
"{{ title }}"
524+
]
525+
}`
526+
}
527+
})
528+
</script>
529+
```
530+
- Result
531+
```HTML
532+
<body id="app">
533+
hint 123
534+
<h1 style="background: red;">test 123</h1>
535+
</body>
536+
```
537+
538+
</details>
539+
505540
<details>
506541
<summary>生命週期</summary>
507542
@@ -510,20 +545,29 @@
510545
<script>
511546
const app = new QUI({
512547
id: "app",
513-
before_mount: function () {
514-
// 停止渲染
515-
// retuen false
516-
},
517-
mounted: function () {
518-
console.log("已掛載");
519-
},
520-
before_update: function () {
521-
// 停止更新
522-
// retuen false
523-
},
524-
updated: function () {
525-
console.log("已更新");
526-
},
548+
when: {
549+
before_mount: function () {
550+
// 停止渲染
551+
// retuen false
552+
},
553+
mounted: function () {
554+
console.log("已掛載");
555+
},
556+
before_update: function () {
557+
// 停止更新
558+
// retuen false
559+
},
560+
updated: function () {
561+
console.log("已更新");
562+
},
563+
before_destroy: function () {
564+
// 停止銷毀
565+
// retuen false
566+
},
567+
destroyed: function () {
568+
console.log("已銷毀");
569+
}
570+
}
527571
});
528572
</script>
529573
```

‎dist/PDQuickUI.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/PDQuickUI.module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
</head>
6666

6767
<body id="app" class="dom-temp">
68+
<section id="test"></section>
6869
<h1 :id="title" :if="heading == 1">{{ title }} 1
6970
{{ string }} {{ CALC(num * 10) }} {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</h1>
7071
<h2 :else-if="isH2">{{ title }} 2
@@ -110,6 +111,29 @@ <h4 :else>{{ title }} 4
110111
<script type="module">
111112
import { QUI } from "./dist/PDQuickUI.module.js"
112113

114+
const test = new QUI({
115+
id: "test",
116+
data: {
117+
test: "test 123"
118+
},
119+
render: () => {
120+
return `
121+
"{{ test }}",
122+
div#main-card.primary.highlighted {
123+
style: "background: red;",
124+
children: [
125+
"test",
126+
header.title {
127+
data-role: "title"
128+
},
129+
section.content {
130+
style: "padding: 20px;"
131+
}
132+
]
133+
}`
134+
}
135+
})
136+
113137
const app = new QUI({
114138
id: "app",
115139
data: {
@@ -182,12 +206,27 @@ <h4 :else>{{ title }} 4
182206
console.log(app.data)
183207
}
184208
},
185-
lifecycle: {
209+
when: {
186210
before_render: _ => {
187211
console.log("準備渲染")
188212
// return false;
189213
},
190214
rendered: _ => {
215+
// const html = app.parseToHTML(`
216+
// div#main-card.primary.highlighted {
217+
// style: "background: red;",
218+
// children: [
219+
// "test",
220+
// header.title {
221+
// data-role: "title"
222+
// },
223+
// section.content {
224+
// style: "padding: 20px;"
225+
// }
226+
// ]
227+
// },
228+
// "test"`);
229+
// console.log(html)
191230
// setTimeout(_ => {
192231

193232
// app.data.heading = 3

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pdquickui",
3-
"version": "0.3.0",
3+
"version": "0.4.0",
44
"description": "PDQuickUI contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
55
"main": "dist/PDQuickUI.js",
66
"module": "dist/PDQuickUI.module.js",

‎src/PDQuickUI.js‎

5.81 KB
Binary file not shown.

‎src/QUI.ts‎

503 Bytes
Binary file not shown.

‎src/function/htmlParser.ts‎

6.97 KB
Binary file not shown.

‎src/function/renderElement.ts‎

-174 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)