pdrenderkit
Advanced tools
PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.
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
cdn.jsdelivr.new 引入 / Or Include via cdn.jsdelivr.new<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 / :html:path 時禁用瀏覽器中的本地文件限制或使用實時服務器。
Make sure to disable local file restrictions in your browser or use a live server when you are testing :path.
<h1>path heading</h1>
<p>path content</p>
<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>
<body id="app">
<h1>path heading</h1>
<p>path content</p>
<section>
<b>innerHtml</b>
</section>
</body>
:for<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>
<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>
:for 迴圈 / Nested :for Loop<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>
<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>
:if<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>
heading = 1
<body id="app">
<h1>test 1</h1>
</body>
heading = null && isH2 = true
<body id="app">
<h2>test </h2>
</body>
heading = 3 && isH2 = null
<body id="app">
<h3>test 3</h3>
</body>
heading = null && isH2 = null
<body id="app">
<h4>test </h4>
</body>
@event<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>
: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, :colorLENGTH():<body id="app">
<p>Total: {{ LENGTH(array) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
</script>
<body id="app">
<p>Total: 4</p>
</body>
CALC():<body id="app">
<p>calc: {{ CALC(num * 10) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
num: 1
}
});
</script>
<body id="app">
<p>calc: 10</p>
</body>
UPPER() / LOWER()<body id="app">
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
</script>
<body id="app">
<p>UPPER lower</p>
</body>
DATE(num, format):<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>
<body id="app">
<p>2024-08-17 03:40:47</p>
</body>
<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
});
document.getElementById("test");
document.querySelector("div.test");
document.querySelectorAll("div.test");
document.querySelector("input[name='test']");
"#test".$;
"div.test".$;
"div.test".$all;
"input[name='test']".$;
<div class="test" style="width: 5rem; height: 80px;" test="test">
<button>
<img src="https://xxxxxx">
</button>
</div>
"div.test"._({
style: {
width: "5rem",
height: 80,
},
test: "test"
}, [
"button"._([
"img"._("https://xxxxxx")
])
]);
All translations powered by ChatGPT
©️ 2023 邱敬幃 Pardn Chiu
FAQs
A lightweight frontend rendering tool focusing on real-time DOM manipulation and flexible utilities for small to medium projects.
The npm package pdrenderkit receives a total of 14 weekly downloads. As such, pdrenderkit popularity was classified as not popular.
We found that pdrenderkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.