PDRenderKit 是一個輕量化的前端框架,用於分離前端介面和資料邏輯
PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.
提高代碼的可維護性和可讀性,同時減少開發複雜度。
Improving code maintainability and readability while reducing development complexity.
-
將前端介面與資料邏輯分開,創建更清晰的結構,簡化維護工作。
Segregates front-end presentation from data logic, creating a clearer structure and simplifying maintenance tasks. -
減少重複的代碼段,提高代碼簡潔性。
Provides tools and utilities to minimize repetitive code sections, improving code conciseness. -
模組化設計提升代碼可讀性,使其更易於理解和協作。
Modular design enhances code readability, making it easier to understand and collaborate on. -
基於資料變更自動更新用戶介面,減少手動 DOM 操作步驟。
Automatically updates the user interface in real-time based on data changes, reducing manual DOM manipulation steps. -
減少手動 DOM 操作,專注於應用的邏輯。
Reduces manual DOM manipulation, allowing you to focus more on the core logic of your application. -
保證全功能的同時,最小化對網站速度的影響。
Ensuring full functionality with minimal impact on your website's speed.
此源代碼專案已根據 GPL-3.0 許可證授權。
This source code project is licensed under the GPL-3.0 license.
-
npm install pdrenderkit
-
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd">
-
自動渲染:加載自動渲染並在檢測到資料變更後自動渲染。
Auto Rendering: Load auto-rendering and automatically render data changes after detection.tag description {{value}} 將文字插入到 HTML 標籤中,並根據資料變更更新值。
Insert text into HTML tag and update the value based on data changes.:path 將外部文件中的 HTML 片段加載到當前頁面。
Load HTML fragments from external files into the current page.:html 使用文字替換元素的 innerHTML。
Replace innerHTML of an element with text.:for 支持 item in items、(item, index) in items、(key, value) in object。
Supports item in items, (item, index) in items, (key, value) in object.
遍歷數據集合,為重複數據顯示生成相應的 HTML 元素。
Iterate through a data collection and generate corresponding HTML elements for repetitive data display.:if
:else-if
:else根據指定條件顯示或隱藏元素,為實現分支邏輯添加多種選項。
Show or hide elements based on specified conditions, adding multiple options for implementing branching logic.:model 將資料綁定到表單元素(如 input),當輸入更改時自動更新資料。
Bind data to form elements (e.g., input), automatically updating the data when input changes.:hide 隱藏元素,根據特定條件顯示它們。
Hides elements, conditionally displaying them based on specific criteria.:once 只執行一次綁定或操作。
Executes the binding or operation only once.:[attr] 設定元素屬性,例如 ID、class、圖像來源等。
Set element attributes such as ID, class, image source, etc.
例如::id/:class/:src/:alt/:href...
For example: :id/:class/:src/:alt/:href...@[event] 添加事件監聽器,當事件觸發時執行指定操作。
Add event listeners to execute specified actions when events are triggered.
例如:@click/@input/@mousedown...
For example: @click/@input/@mousedown...:@[event] 為迴圈內的單個元素設置事件處理程序,允許為每個元素設置不同的事件處理。
Set event handlers for individual elements within a loop, allowing different event handling for each element.-
確保在測試
:path
時禁用瀏覽器中的本地文件限制或使用實時服務器。 Make sure to disable local file restrictions in your browser or use a live server when you are testing:path
.- test.html
<h1>path heading</h1> <p>path content</p>
- index.html
<body id="app"> <section :path="./test.html"></section> <section :html="html"></section> </body> <script> const app = new PD({ id: "app", data: { html: "<b>innerHtml</b>" } }); </script>
- Result
<body id="app"> <h1>path heading</h1> <p>path content</p> <section> <b>innerHtml</b> </section> </body>
- test.html
-
- index.html
<body id="app"> <ul> <li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ CALC(index + 1) }}</li> </ul> </body> <script> const app = new PD({ id: "app", data: { ary: ["test1", "test2", "test3"] } }); </script>
- Result
<body id="app"> <li id="test1" index="0">test1 1</li> <li id="test2" index="1">test2 2</li> <li id="test3" index="2">test3 3</li> </body>
- index.html
-
- index.html
<body id="app"> <ul> <li :for="(key, val) in obj"> {{ key }}: {{ val.name }} <ul> <li :for="item in val.ary"> {{ item.name }} <ul> <li :for="(item1, index1) in item.ary1"> {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }} </li> </ul> </li> </ul> </li> </ul> </body> <script> const app = new PD({ 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 } ] } ] } } } }); </script>
- Result
<body id="app"> <ul> <li>food: Food <ul> <li>Snacks <ul> <li>1. Potato Chips - $10</li> <li>2. Chocolate - $8</li> </ul> </li> <li>Beverages <ul> <li>1. Juice - $5</li> <li>2. Tea - $3</li> </ul> </li> </ul> </li> <li>home: Home <ul> <li>Furniture <ul> <li>1. Sofa - $300</li> <li>2. Table - $150</li> </ul> </li> <li>Decorations <ul> <li>1. Picture Frame - $20</li> <li>2. Vase - $15</li> </ul> </li> </ul> </li> </ul> </body>
- index.html
-
- index.html
<body id="app"> <h1 :if="heading == 1">{{ title }} {{ heading }}</h1> <h2 :else-if="isH2">{{ title }} {{ heading }}</h2> <h3 :else-if="heading == 3">{{ title }} {{ heading }}</h3> <h4 :else>{{ title }} {{ heading }}</h4> </body> <script> const app = new PD({ id: "app", data: { heading: [Number|null], isH2: [Boolean|null], title: "test" } }); </script>
- Result:
heading = 1
<body id="app"> <h1>test 1</h1> </body>
- Result:
heading = null && isH2 = true
<body id="app"> <h2>test </h2> </body>
- Result:
heading = 3 && isH2 = null
<body id="app"> <h3>test 3</h3> </body>
- Result:
heading = null && isH2 = null
<body id="app"> <h4>test </h4> </body>
- index.html
-
- index.html
<body id="app"> <button @click="test">test</button> </body> <script> const app = new PD({ id: "app", event: { test: function(e){ alert(e.target.innerText + " clicked"); } } }); </script>
- index.html
-
: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
-
-
- index.html
<body id="app"> <p>Total: {{ LENGTH(array) }}</p> </body> <script> const app = new PD({ id: "app", data: { array: [1, 2, 3, 4] } }); </script>
- result
<body id="app"> <p>Total: 4</p> </body>
- index.html
-
- index.html
<body id="app"> <p>calc: {{ CALC(num * 10) }}</p> </body> <script> const app = new PD({ id: "app", data: { num: 1 } }); </script>
- result
<body id="app"> <p>calc: 10</p> </body>
- index.html
-
- index.html
<body id="app"> <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p> </body> <script> const app = new PD({ id: "app", data: { test1: "upper", test2: "LOWER" } }); </script>
- result
<body id="app"> <p>UPPER lower</p> </body>
- index.html
-
- index.html
<body id="app"> <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p> </body> <script> const app = new PD({ id: "app", data: { now: Math.floor(Date.now() / 1000) } }); </script>
- result
<body id="app"> <p>2024-08-17 03:40:47</p> </body>
- index.html
-
-
<body id="app"></body> <script> const app = new PD({ id: "app", next: function () { console.log("Rendering completed"); } }); </script>
-
確保在測試
-
let section = document.createElement("section"); section.id = "#test"; document.body.appendChild(section); let button = document.createElement("button"); button.style.width = "10rem"; button.style.height = "2rem"; button.style.backgroundColor = "steelblue"; button.style.color = "fff"; button.onclick = function(){ alert("test") }; button.innerHTML = "<span>test</span> button"; section.appendChild(button); let svg = document.createElement("span"); span.classList.add("svg"); span.setAttribute("path", "https://xxxxxx"); section.appendChild(span); let img = document.createElement("img"); img.classList.add("lazyload"); img.dataset.src = "https://xxxxxx"; section.appendChild(img); let input = document.createElement("input"); input.placeholder = "type"; input.type = "email"; section.appendChild(input);
-
document.body._child( "section#test"._([ "button"._({ style: { width: "10rem", hright: "2rem", backgroundColor: "steelblue", color: "#fff" } }, [ // or "<span>test</span> button" "span"._("test"), " button" ])._click(function(){ alert("test") }), "span.svg:._({ path: "https://xxxxxx" }), // No Lazy Loading => "img"._("https://xxxxxx"), "img"._({ lazyload: "https://xxxxxx" }), "input@email type"._() ]) ); _Listener({ svg: true, // Add SVGListener, convert span.svg to svg tag lazyload: true // Add Lazy Listener, Lazy Loading images });
-
- Before
document.getElementById("test"); document.querySelector("div.test"); document.querySelectorAll("div.test"); document.querySelector("input[name='test']");
- After
"#test".$; "div.test".$; "div.test".$all; "input[name='test']".$;
- Before
-
- Before
<div class="test" style="width: 5rem; height: 80px;" test="test"> <button> <img src="https://xxxxxx"> </button> </div>
- After
"div.test"._({ style: { width: "5rem", height: 80, }, test: "test" }, [ "button"._([ "img"._("https://xxxxxx") ]) ]);
- Before
All translations powered by ChatGPT
©️ 2023 邱敬幃 Pardn Chiu