Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

pdrenderkit

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

pdrenderkit

PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.

1.0.1
Source
npm

Version published: 6 months ago

Weekly downloads: 17; increased by41.67%

Maintainers: 0

Weekly downloads

Created: 6 months ago

Source

PDRenderKit (JavaScript Library)

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.

特點 / Feature

UI和數據邏輯分離 / Separation of UI and Data Logic:
將前端畫面與資料邏輯分離，創建更清晰的結構，簡化維護工作。
Segregates front-end presentation from data logic, creating a clearer structure and simplifying maintenance tasks.
減少重複代碼 / Reduction of Repetitive Code:
提供工具和實用功能使重複的代碼段最小化，提高代碼簡潔性。
Provides tools and utilities to minimize repetitive code sections, improving code conciseness.
提高代碼可讀性 / Improved Code Readability:
模塊化設計增強代碼可讀性，使其更易於理解和協作。
Modular design enhances code readability, making it easier to understand and collaborate on.
監聽數據變化 / Data Change Monitoring:
根據數據變化自動實時更新用戶畫面，減少手動DOM操作步驟。
Automatically updates the user interface in real-time based on data changes, reducing manual DOM manipulation steps.
自動渲染 / Automatic Rendering:
減少手動DOM操作，讓你更多地專注於應用的核心邏輯。
Reduces manual DOM manipulation, allowing you to focus more on the core logic of your application.
輕量級 / Lightweight:
輕量級的特性，最小化不必要的複雜性，提供更大的靈活性，讓你在沒有框架約束的情況下自由使用。
Lightweight in nature, minimizing unnecessary complexity and providing greater flexibility, allowing you to use it freely without framework constraints.

範例 / Example

如何使用 / How to use

<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd">

PD (原先命名$dom) 自動渲染: 加載自動渲染，並在檢測到變化後自動渲染數據。 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	遍歷數據集合，為重複數據生成對應的HTML元素。支持 item in items, (item, index) in items, (key, value) in object. Iterate through a data collection and generate corresponding HTML elements for repetitive data display. Supports item in items, (item, index) in items, (key, value) in object.
: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.
:[attr]	設置元素屬性，例如ID、class、圖片來源等。例如: :id/:class/:src/:alt/:href.. Set element attributes such as ID, class, image source, etc. For example: :id/:class/:src/:alt/:href...
@[event]	添加事件監聽器，在觸發事件時執行指定操作。例如: @click/@input/@mousedown... Add event listeners to execute specified actions when events are triggered. For example: @click/@input/@mousedown...
:@[event]	為循環內的單個元素設置事件處理程序，允許每個元素有不同的事件處理。 Set event handlers for individual elements within a loop, allowing different event handling for each element.

函式 LENGTH(): 若 data.array = [1, 2, 3, 4]; 則 <p>共有 {{ LENGTH(array) }} 項</p> 為 <p>共有 4 項</p>

:path / :html 確保在測試 ':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>

:for

<body id="app">
    <ul>
        <li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ 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">test1 2</li>
    <li id="test3" index="2">test1 3</li>
</body>

:for (Multiple)

<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">
                        {{ index1 + 1 }}. {{ item1.name }} - {{ item1.price }}元
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
<script>
    const app = new PD({
        id: "app",
        data: {
            obj: {
                food: {
                    name: "食品",
                    ary: [
                        {
                            name: '零食',
                            ary1: [
                                { name: '薯片', price: 10 },
                                { name: '巧克力', price: 8 }
                            ]
                        },
                        {
                            name: '飲料',
                            ary1: [
                                { name: '果汁', price: 5 },
                                { name: '茶', price: 3 }
                            ]
                        }
                    ]
                },
                home: {
                    name: '家居',
                    ary: [
                        {
                            name: '家具',
                            ary1: [
                                { name: '沙發', price: 300 },
                                { name: '桌子', price: 150 }
                            ]
                        },
                        {
                            name: '裝飾',
                            ary1: [
                                { name: '畫框', price: 20 },
                                { name: '花瓶', price: 15 }
                            ]
                        }
                    ]
                }
            }
        }
    });
</script>

Result

<body id="app">
<ul>
    <li>food: 食品
        <ul>
            <li>零食
               <ul>
                    <li>1. 薯片 - 10元</li>
                    <li>2. 巧克力 - 8元</li>
                </ul>
                </li>
            <li>飲料
                <ul>
                    <li>1. 果汁 - 5元</li>
                    <li>2. 茶 - 3元</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>home: 家居
        <ul>
            <li>家具
                <ul>
                    <li>1. 沙發 - 300元</li>
                    <li>2. 桌子 - 150元</li>
                </ul>
            </li>
            <li>裝飾
                <ul>
                    <li>1. 畫框 - 20元</li>
                    <li>2. 花瓶 - 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>

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>

@event

<body id="app">
    <button @click="test">test</button>
</body>
<script>
    const app = new PD({
        id: "app",
        event: {
            test: function(){
                console.log(this);
            }
        }
    });
</script>

Rendering completed

<body id="app"></body>
<script>
    const app = new PD({
        id: "app",
        next: function () {
            console.log("Rendering completed");
        }
    });
</script>

擴展 / Extension

Before

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 = "輸入你的內容";
input.type = "email";
section.appendChild(input);

After

document.body._child(
    "section#test"._([
        "button"._({
            style: {
                width: "10rem",
                hright: "2rem",
                backgroundColor: "steelblue",
                color: "#fff"
            }
        })._click(function(){
            alert("test")
        }, [
            // or "<span>test</span> button"
            "span"._("test"),
            " button"
        ]),
        "span.svg:._({ path: "https://xxxxxx" }),
        // 無 Lazy Loading => "img"._("https://xxxxxx"),
        "img"._({ lazyload: "https://xxxxxx" }),
        "input@email 輸入你的內容"._()
    ])
);

// 添加 SVG Listener, 轉換 span.svg 至 svg 標籤
_SVGListener();

// 添加 Lazy Listener, Lazy Loading 圖片
_LazyListener();

獲取 / Get Element

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']".$;

新增 / Add Element

<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")
    ])
]);

TypeScript Interface

Keywords

FAQs

What is pdrenderkit?

Is pdrenderkit popular?

Is pdrenderkit well maintained?

Package last updated on 27 Jul 2024

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.

Install