Skip to content

Latest commit

 

History

History
232 lines (190 loc) · 7.47 KB

README.zh.md

File metadata and controls

232 lines (190 loc) · 7.47 KB

RenderJS

Note

(原名：PDExtension／PDRenderKit，自 2.0.0 版本起更名為 RenderJS)

RenderJS 是一個專注於 JavaScript 原生物件 prototype 擴展的輕量工具，提供強大的 DOM 操作能力與資料處理方法，減少重複代碼，提升開發效率。

tag size
npm download jsdeliver

特點

DOM 操作簡化

使用簡潔的鏈式語法，輕鬆完成複雜的 DOM 操作。

增強查詢功能

透過簡化選擇器語法，快速獲取元素，支援單一與多元素選取。

預設多項擴展

預設多項 prototype 擴展，加速各種場景的開發。

即插即用

與現有 JavaScript 程式無縫整合，支持現代瀏覽器。

安裝方式

從 npm 安裝

npm i @pardnchiu/renderjs

從 CDN 引入

<!-- 2.0.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>

<!-- 1.5.2 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>

功能介紹

擴展

  • 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 = "type";
input.type = "email";
section.appendChild(input);

  • After

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

簡化版前端框架

Note

RJS 是基於 QuickUI 的簡化版前端框架，專為特定專案設計。

  • 使用非 vDOM 技術進行渲染，提升效能並降低複雜性。
  • 移除自動監聽與自動更新功能，由開發者手動控制更新流程。
  • 新增 renew() 函式，支援資料與事件的精確更新。

  • 可用屬性

    tag description
    {{value}} 將文字插入到 HTML 標籤中，並根據資料變更更新值。
    :path 將外部文件中的 HTML 片段加載到當前頁面。
    :html 使用文字替換元素的 innerHTML。
    :for 支持 item in items、(item, index) in items、(key, value) in object。
    遍歷數據集合，為重複數據顯示生成相應的 HTML 元素。
    :if
    :else-if
    :el-if
    :else    		 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。
    :model 將資料綁定到表單元素（如 input），當輸入更改時自動更新資料。
    :[attr] 設定元素屬性，例如 ID、class、圖像來源等。
    例如：:id/:class/:src/:alt/:href...
    :[css]
    @[event] 添加事件監聽器，當事件觸發時執行指定操作。
    例如：@click/@input/@mousedown...

  • 初始化 RJS

    const app = "(元件ID)".RJS({
    data: {
        // 定義資料
    },
    event: {
        // 定義事件
    },
    when: {
        before_render: function () {
            // 在渲染前執行（可停止渲染）
            // return false
        },
        rendered: function () {
            // 渲染完成後執行
        }
    }
});

  • 更新 RJS

    app.renew({
    // data: 僅填寫需要更新的資料項目，未填部分將保留初始化時的資料。
    // event: 僅填寫需要更新的事件項目，未填部分將保留初始化時的事件。
    // when: 僅填寫需要更新的生命周期邏輯，未填部分將保留初始化時的邏輯。
});

授權條款

本專案採用類 MIT 授權，但僅提供混淆後的程式碼：

  • 與 MIT 相同：可自由使用、修改、再散布，包含商業用途
  • 主要差異：預設僅提供混淆版程式碼，原始碼需另外購買
  • 授權內容：必須保留原始版權聲明 (與 MIT 相同)

詳細條款與條件請參閱軟體使用協議。

開發者

邱敬幃 Pardn Chiu

©️ 2022 邱敬幃 Pardn Chiu