修復比對 APPEND 中操作子節點渲染問題。

pardnchiu · Nov 4, 2024 · 89ba7fc · 89ba7fc
1 parent 3cb2349
commit 89ba7fc
Show file tree

Hide file tree

Showing 17 changed files with 841 additions and 112 deletions.
diff --git a/README.en.md b/README.en.md
diff --git a/README.md b/README.md
@@ -1,22 +1,23 @@
 # PDQuickUI (JavaScript Library)
 
-![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/license/pardnchiu/PDQuickUI?color=44bb44) ![](https://img.shields.io/badge/creator-Pardn%20Chiu-4444bb)<br>
-![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI?color=bbbb44) ![](https://img.shields.io/npm/v/pdquickui?color=44bbbb) ![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js?color=bb44bb)<br>
-[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDQuickUI/blob/main/README.md)
+![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js)<br>
+[![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI)](https://github.com/pardnchiu/PDQuickUI) [![](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) ![](https://img.shields.io/github/license/pardnchiu/PDQuickUI)<br>
+[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDQuickUI/blob/main/README.en.md)
 
-`PDQuickUI` 是從  [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架。<br>
-專注於前端框架功能的擴展。引入虛擬 DOM 概念進行重寫，提升了渲染的性能，以及更高效的數據監聽和自動更新。<br>
-此專案也移除了 `PDRenderKit` 中針對 `prototype` 擴展，確保兼容性與性能，適合複雜的應用場景。<br>
-提供 `module` 和非 `module` 版本，並將授權從 `PDRenderKit` 的 `GPL-3.0` 改為 `MIT`。
+`PDQuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。<br>
+透過引入虛擬 DOM 重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。<br>
+
+本專案移除了 `PDRenderKit` 中針對 `prototype` 的擴展，確保兼容性與效能，適合用於複雜的應用場景。<br>
+提供 `module` 和非 `module` 版本，授權從 `PDRenderKit` 的 `GPL-3.0` 更改為 `MIT`。<br>
 
 ## 特點
 
-- **清晰的結構**：UI 和資料邏輯分離，方便維護。
-- **代碼簡潔性**：減少重複代碼，提高可讀性。
-- **自動渲染**：監聽資料變更並自動更新，減少手動操作。
-- **輕量化**：實現功能的同時檔案大小也保持在 `20kb` 以內。
+- **清晰的架構**：UI 和資料邏輯分離，維護方便。
+- **代碼簡潔**：減少重複代碼，提升可讀性。
+- **自動渲染**：監控資料變動並自動更新，減少手動操作。
+- **輕量化**：功能完整的同時，文件大小控制在 `20kb` 以內。
 
-## 使用方法
+## 安裝方式
 
 - **從 npm 安裝**
     ```bash
@@ -33,28 +34,28 @@
         ```
 
 ## 功能介紹
-自動渲染：加載自動渲染並在檢測到資料變更後自動渲染。
+自動渲染：加載自動渲染在檢測到資料變更時自動重新渲染。
 
 <details>
-<summary>參數概覽</summary>
+<summary>屬性概覽</summary>
 
-| tag | description |
+| 屬性 | 描述 |
 | --- | --- |
-| {{value}} | 將文字插入到 HTML 標籤中，並根據資料變更更新值。 |
-| :path | 將外部文件中的 HTML 片段加載到當前頁面。 |
-| :html | 使用文字替換元素的 innerHTML。 |
-| :for | 支持 item in items、(item, index) in items、(key, value) in object。<br>遍歷數據集合，為重複數據顯示生成相應的 HTML 元素。 |
-| :if<br>:else-if<br>:elif<br>:else | 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。 |
-| :model | 將資料綁定到表單元素（如 input），當輸入更改時自動更新資料。 |
-| :hide | 隱藏元素，根據特定條件顯示它們。 |
-| :[attr] | 設定元素屬性，例如 ID、class、圖像來源等。<br>例如：:id/:class/:src/:alt/:href... |
-| @[event] | 添加事件監聽器，當事件觸發時執行指定操作。<br>例如：@click/@input/@mousedown... |
-| :@[event] | 為迴圈內的單個元素設置事件處理程序，允許為每個元素設置不同的事件處理。 |
+| `{{value}}` | 將文字插入到 HTML 標籤中，並隨資料變更自動更新。 |
+| `:path` | 搭配 `temp` 標籤，用於將外部文件中的 HTML 片段加載到當前頁面。 |
+| `:html` | 使用文本替換元素的 `innerHTML`。 |
+| `:for` | 支援 `item in items`、`(item, index) in items`、`(key, value) in object` 格式，遍歷資料集合，生成對應的 HTML 元素。 |
+| `:if`<br>`:else-if`<br>`:elif`<br>`:else` | 根據條件顯示或隱藏元素，實現分支邏輯。 |
+| `:model` | 將資料綁定到表單元素（如 `input`），當輸入變更時自動更新資料。 |
+| `:hide` | 根據特定條件隱藏元素。 |
+| `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。<br>範例：`:id`、`:class`、`:src`、`:alt`、`:href`... |
+| `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。<br>範例：`@click`、`@input`、`@mousedown`... |
+| `:@[event]` | 用於 `:for` 內單個元素的事件處理，允許每個元素設置不同的事件處理。 |
 
 </details>
 
 <details>
-<summary><code>{{value}}</code></summary>
+<summary>屬性 <code>{{value}}</code></summary>
 
 - index.html
     ```HTML
@@ -79,7 +80,7 @@
 </details>
 
 <details>
-<summary><code>:html</code></summary>
+<summary>屬性 <code>:html</code></summary>
 
 - index.html
     ```HTML
@@ -106,7 +107,7 @@
 </details>
 
 <details>
-<summary><code>:path</code></summary>
+<summary>屬性 <code>:path</code></summary>
 
 *確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。*
 
@@ -118,7 +119,7 @@
 - index.html
     ```html
     <body id="app">
-        <section :path="./test.html"></section>
+        <temp :path="./test.html"></temp>
     </body>
     <script>
         const app = new QUI({
@@ -129,6 +130,7 @@
 - Result
     ```html
     <body id="app">
+        <!-- 直接插入 PATH 內容 -->
         <h1>path heading</h1>
         <p>path content</p>
     </body>
@@ -137,7 +139,7 @@
 </details>
 
 <details>
-<summary><code>:for</code></summary>
+<summary>屬性 <code>:for</code></summary>
 
 - index.html
     ```html
@@ -167,7 +169,7 @@
 </details>
 
 <details>
-<summary><code>:for</code>嵌套</summary>
+<summary>多層 <code>:for</code> 嵌套</summary>
 
 - index.html
     ```html
@@ -279,7 +281,7 @@
 </details>
 
 <details>
-<summary><code>:if</code>/<code>:else-if</code>/<code>:elif</code>/<code>:else</code></summary>
+<summary>屬性 <code>:if</code>/<code>:else-if</code>/<code>:elif</code>/<code>:else</code></summary>
 
 - index.html
     ```html
@@ -328,7 +330,7 @@
 </details>
 
 <details>
-<summary><code>:model</code></summary>
+<summary>屬性 <code>:model</code></summary>
 
 - index.html
     ```html
@@ -354,7 +356,7 @@
 </details>
 
 <details>
-<summary><code>@[event]</code></summary>
+<summary>屬性 <code>@[event]</code></summary>
 
 - index.html
     ```html
@@ -376,14 +378,14 @@
 </details>
 
 <details>
-<summary><code>CSS 快速設置</code></summary>
+<summary>快速設置 CSS</summary>
 
 `: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`
 
 </details>
 
 <details>
-<summary><code>可用函式</code></summary>
+<summary>可用函式</summary>
 
 - `LENGTH()`:
     - index.html
@@ -459,7 +461,7 @@
             const app = new QUI({
                 id: "app",
                 data: {
-                    now: Math.floor(Date.now() / 1000)
+                    now: $Math.floor(Date.now() / 1000)
                 }
             });
         </script>
@@ -474,25 +476,7 @@
 </details>
 
 <details>
-<summary><code>Listerner</code></summary>
-
-```html
-<body id="app"></body>
-<script>
-    const app = new QUI({
-        id: "app",
-        listener: {
-            lazyload: true, // 圖片延遲加載
-            svg: true       // SVG 檔案轉換
-        }
-    });
-</script>
-```
-
-</details>
-
-<details>
-<summary><code>資料獲取</code></summary>
+<summary>資料獲取</summary>
 
 ```html
 <body id="app">
@@ -519,7 +503,7 @@
 </details>
 
 <details>
-<summary><code>渲染狀態</code></summary>
+<summary>生命週期</summary>
 
 ```html
 <body id="app"></body>
@@ -546,6 +530,53 @@
 
 </details>
 
+<details>
+<summary>可選設定</summary>
+
+- test.svg
+    ```XML
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18" stroke="black" stroke-width="2" stroke-linecap="round"/>
+    <line x1="6" y1="6" x2="18" y2="18" stroke="black" stroke-width="2" stroke-linecap="round"/>
+    </svg>
+    ```
+- index.html
+    ```html
+    <body id="app">
+        <temp-svg :src="test.svg"></temp-svg>
+        <temp-svg src="svg"></temp-svg>
+        <img :lazyload="image">
+        <img lazyload="test.jpg">
+    </body>
+    <script>
+        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)
+            }
+        });
+    </script>
+    ```
+- result
+    ```html
+    <body id="app">
+        <!-- 直接插入 SVG 檔案 -->
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <line x1="18" y1="6" x2="6" y2="18" stroke="black" stroke-width="2" stroke-linecap="round">
+            <line x1="6" y1="6" x2="18" y2="18" stroke="black" stroke-width="2" stroke-linecap="round">
+        </svg>
+        <!-- 會在元素進入畫面時讀取 -->
+        <img src="test.jpg">
+    </body>
+    ```
+
+</details>
+
 ## 開發者
 
 <img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />