@pardnchiu/renderjs 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/LICENSE +21 -74
  2. package/README.md +52 -202
  3. package/package.json +46 -46
  4. package/README.zh.md +0 -232
package/LICENSE CHANGED
@@ -1,74 +1,21 @@
1
- # Software Usage Agreement
2
- **Date**: December 20, 2024
3
- **Scope**: This agreement applies to the **RenderJS** software provided by **邱敬幃 Pardn Chiu** (hereinafter referred to as "the Software").
4
-
5
- ## 1. Free Usage License
6
-
7
- 1.1 The obfuscated version of the Software is provided free of charge to all users, including personal and commercial use, without functional limitations.
8
- 1.2 Users are free to reverse engineer, decompile, modify, and redistribute the obfuscated code, whether for commercial or non-commercial purposes, under the condition that the original copyright notice and the terms of this agreement are retained.
9
- 1.3 The free version is only available in an obfuscated format; the source code is not disclosed and is limited to the use, modification, and redistribution of obfuscated code. Users are allowed to reverse engineer and modify the code as needed, including for commercial use.
10
- 1.4 This right to use, reverse engineer, modify, and redistribute the obfuscated code is permanent and will not be revoked.
11
-
12
- ## 2. Reverse Engineering and Code Modification
13
-
14
- 2.1 Users are free to reverse engineer, modify, or adjust the obfuscated code and may use the modified code for commercial or non-commercial purposes.
15
- 2.2 Users may freely distribute the modified obfuscated code, including for commercial purposes, provided that the original copyright notice is retained.
16
- 2.3 Users assume all risks and responsibilities associated with reverse engineering, code modification, or distribution. The author is not liable for any issues, damages, or losses arising from modified code usage, reverse engineering, or distribution.
17
-
18
- ## 3. Source Code Purchase and Authorization
19
-
20
- 3.1 Users who require access to the source code may purchase a full source code license. Upon purchase, users are granted rights to view, modify, and use the source code for commercial purposes.
21
- 3.2 After purchasing the source code, users may freely use, modify, and distribute it, but must adhere to the intellectual property protection clauses in this agreement.
22
- 3.3 Use of the source code following purchase remains subject to all terms of this agreement, particularly those pertaining to intellectual property protection.
23
-
24
- ## 4. Intellectual Property Protection
25
-
26
- 4.1 The source code, obfuscated code, and all related documentation of the Software are the intellectual property of 邱敬幃 Pardn Chiu.
27
- 4.2 Users can modify and distribute the obfuscated code or its derivatives, including for commercial purposes, as long as the original copyright notice (e.g., "Copyright © 邱敬幃 Pardn Chiu") is retained.
28
- 4.3 Users may sell modified projects, including projects derived from reverse-engineered or modified code. These derivatives are considered the user's creations. The original copyright notice must remain intact, but the author does not interfere with the user's commercialization of modified results.
29
-
30
- ## 5. Disclaimer of Liability
31
-
32
- 5.1 The Software is provided "as is," without any express or implied warranties regarding its suitability, stability, or performance.
33
- 5.2 The author assumes no liability for any damages or issues caused by code modification, reverse engineering, or any other actions during the use of the Software.
34
-
35
- ## 6. Termination of Agreement
36
-
37
- 6.1 If users violate any terms of this agreement (including but not limited to unauthorized source code distribution or infringement of intellectual property), the author reserves the right to immediately terminate the license and take appropriate legal action.
38
- 6.2 Upon termination, users must cease using the Software and delete all related files.
39
-
40
- ## 7. Contact Information
41
-
42
- For any questions regarding this agreement or source code purchase, please contact:
43
-
44
- **邱敬幃 Pardn Chiu**
45
- Email: dev@pardn.io
46
- Website: https://renderjs.pardn.io/
47
-
48
- ---
49
-
50
- ## Summary of Key Points:
51
-
52
- 1. **Free Version Usage and Distribution**:
53
- The obfuscated code of the free version can be freely used, modified, and redistributed without functional limitations, including for commercial purposes. Users must retain the original copyright notice and terms of this agreement.
54
-
55
- 2. **Reverse Engineering and Code Modification**:
56
- Users are allowed to reverse engineer, modify, and distribute the obfuscated code, including for commercial purposes, provided that the original copyright notice is kept intact. Users assume full responsibility for any risks related to reverse engineering, modification, or distribution.
57
-
58
- 3. **Source Code Purchase**:
59
- Users may purchase the source code to obtain the rights to view, modify, and use the source code for commercial purposes. After purchase, users may modify, distribute, and commercialize the source code, subject to intellectual property protection clauses in this agreement.
60
-
61
- 4. **Intellectual Property Protection**:
62
- The source code, obfuscated code, and related documentation are the intellectual property of the author. Users may modify and distribute the obfuscated code, including for commercial purposes, but must retain the original copyright notice. The author does not interfere with users' commercialization of modified projects.
63
-
64
- 5. **Disclaimer of Liability**:
65
- The software is provided "as is," without warranties regarding its stability or performance. The author is not liable for any damages arising from modification, reverse engineering, or usage of the software.
66
-
67
- 6. **Termination of Agreement**:
68
- If users violate any terms of the agreement, the author reserves the right to terminate the license and take legal action. Upon termination, users must stop using the software and delete all related files.
69
-
70
- 7. **Contact Information**:
71
- For any questions regarding this agreement or source code purchase, users can contact:
72
- **邱敬幃 Pardn Chiu**
73
- Email: dev@pardn.io
74
- Website: [https://renderjs.pardn.io/](https://renderjs.pardn.io/)
1
+ MIT License
2
+
3
+ Copyright (c) 2024 邱敬幃 Pardn Chiu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,232 +1,82 @@
1
- # RenderJS
2
-
3
1
  > [!NOTE]
4
- > (Formerly known as PDRenderKit, renamed to RenderJS starting from version `2.0.0`)
5
-
6
- > RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods.
2
+ > This README was generated by [SKILL](https://github.com/pardnchiu/skill-readme-generate), get the ZH version from [here](./doc/README.zh.md).
7
3
 
8
- ![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
9
- ![size](https://img.shields.io/github/size/pardnchiu/RenderJS/dist%2FRenderJS.js)<br>
10
- [![npm](https://img.shields.io/npm/v/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)
11
- [![download](https://img.shields.io/npm/dm/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)
12
- [![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/renderjs)](https://www.jsdelivr.com/package/npm/@pardnchiu/renderjs)<br>
13
- [![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/RenderJS/blob/main/README.zh.md)
4
+ ***
14
5
 
15
- ## Feature
6
+ <p align="center">
7
+ <picture>
8
+ <img src="./doc/logo.svg" alt="RenderJS" width="120">
9
+ </picture>
10
+ </p>
16
11
 
17
- ### Simplified DOM Manipulation
12
+ <p align="center">
13
+ <strong>EXTEND NATIVE JS PROTOTYPES, RENDER WITHOUT THE OVERHEAD</strong>
14
+ </p>
18
15
 
19
- Achieve complex DOM operations with concise chainable syntax.
16
+ <p align="center">
17
+ <a href="https://www.npmjs.com/package/@pardnchiu/renderjs"><img src="https://img.shields.io/npm/v/@pardnchiu/renderjs?include_prereleases&style=for-the-badge" alt="npm"></a>
18
+ <a href="https://github.com/pardnio/RenderJS/releases"><img src="https://img.shields.io/github/license/pardnio/RenderJS?include_prereleases&style=for-the-badge" alt="License"></a>
19
+ </p>
20
20
 
21
- ### Enhanced Querying
21
+ ***
22
22
 
23
- Quickly retrieve elements with simplified selector syntax, supporting both single and multiple element selection.
23
+ > A JavaScript frontend rendering tool with chainable DOM syntax, a one-shot template engine, and native prototype extensions
24
24
 
25
- ### Built-in Extensions
25
+ ## Table of Contents
26
26
 
27
- Predefined prototype extensions accelerate development across various scenarios.
27
+ - [Features](#features)
28
+ - [Built With](#built-with)
29
+ - [Architecture](#architecture)
30
+ - [License](#license)
31
+ - [Author](#author)
32
+ - [Stars](#stars)
28
33
 
29
- ### Plug and Play
34
+ ## Features
30
35
 
31
- Seamlessly integrates with existing JavaScript projects and supports modern browsers.
36
+ > `npm i @pardnchiu/renderjs` · [Documentation](./doc/doc.md)
32
37
 
33
- ## Installation
38
+ - **Chainable DOM construction** — Build real DOM elements from tag-selector strings like `"div.card#id"._({...}, [children])`, replacing verbose `createElement` chains.
39
+ - **One-shot template engine** — `RJS` offers declarative `:if`/`:for`/`:model`/`{{ }}` directives that render straight to the DOM in a single pass, with no virtual-DOM diffing; updates are triggered manually via `renew()`, avoiding the overhead of automatic reactive watching.
40
+ - **Native prototype extensions** — Adds dozens of chainable methods to `String`/`Array`/`Object`/`Element`/`URL`/`window` (e.g. `_child`, `_class`, `$req`, `$shuffle`, negative-index access, query-string builders), with no runtime dependency.
41
+ - **Built-in lazyload and SVG inlining** — `_Listener({ lazyload, svg })` enables `IntersectionObserver`-based image lazy loading and automatic SVG inlining in one line.
42
+ - **Zero-dependency, drop-in setup** — A single minified `dist/RenderJS.js` file, installable via npm or a CDN `<script>` tag, runs directly in the browser.
34
43
 
35
- ### Install via npm
44
+ ## Built With
36
45
 
37
- ```shell
38
- npm i @pardnchiu/renderjs
39
- ```
46
+ <a href="https://skillicons.dev">
47
+ <img src="https://skillicons.dev/icons?i=ts,js,html,css,npm&theme=light" />
48
+ </a>
40
49
 
41
- ### Include via CDN
50
+ ## Architecture
42
51
 
43
- ```html
44
- <!-- Version 2.0.0 and above -->
45
- <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>
52
+ > [Full Architecture](./doc/architecture.md)
46
53
 
47
- <!-- Version 1.5.2 and below -->
48
- <script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>
54
+ ```mermaid
55
+ graph TB
56
+ A[HTML Template] --> B[RJS Core]
57
+ B --> C[Directive Parser]
58
+ C --> D[Rendered DOM]
59
+ E[Prototype Extensions] -.-> D
60
+ F[Lazyload / SVG Listener] -.-> D
49
61
  ```
50
62
 
51
- ## Overview
52
-
53
- ### Extension
54
-
55
- - #### Before
56
- ```javascript
57
- let section = document.createElement("section");
58
- section.id = "#test";
59
- document.body.appendChild(section);
60
-
61
- let button = document.createElement("button");
62
- button.style.width = "10rem";
63
- button.style.height = "2rem";
64
- button.style.backgroundColor = "steelblue";
65
- button.style.color = "fff";
66
- button.onclick = function(){
67
- alert("test")
68
- };
69
- button.innerHTML = "<span>test</span> button";
70
- section.appendChild(button);
71
-
72
- let svg = document.createElement("span");
73
- span.classList.add("svg");
74
- span.setAttribute("path", "https://xxxxxx");
75
- section.appendChild(span);
76
-
77
- let img = document.createElement("img");
78
- img.classList.add("lazyload");
79
- img.dataset.src = "https://xxxxxx";
80
- section.appendChild(img);
81
-
82
- let input = document.createElement("input");
83
- input.placeholder = "type";
84
- input.type = "email";
85
- section.appendChild(input);
86
- ```
87
- - #### After
88
- ```javascript
89
- document.body._child(
90
- "section#test"._([
91
- "button"._({
92
- style: {
93
- width: "10rem",
94
- hright: "2rem",
95
- backgroundColor: "steelblue",
96
- color: "#fff"
97
- }
98
- }, [
99
- // or "<span>test</span> button"
100
- "span"._("test"),
101
- " button"
102
- ])._click(function(){
103
- alert("test")
104
- }),
105
- "span.svg:._({ path: "https://xxxxxx" }),
106
- // No Lazy Loading => "img"._("https://xxxxxx"),
107
- "img"._({ lazyload: "https://xxxxxx" }),
108
- "input@email type"._()
109
- ])
110
- );
111
-
112
- _Listener({
113
- svg: true, // Add SVGListener, convert span.svg to svg tag
114
- lazyload: true // Add Lazy Listener, Lazy Loading images
115
- });
116
- ```
117
-
118
- - #### Get Element
119
- - Before
120
- ```javascript
121
- document.getElementById("test");
122
- document.querySelector("div.test");
123
- document.querySelectorAll("div.test");
124
- document.querySelector("input[name='test']");
125
- ```
126
- - After
127
- ```javascript
128
- "test".$;
129
- "div.test".$;
130
- "div.test".$all;
131
- "input[name='test']".$;
132
- ```
133
-
134
- - #### Add Element
135
- - Before
136
- ```html
137
- <div class="test" style="width: 5rem; height: 80px;" test="test">
138
- <button>
139
- <img src="https://xxxxxx">
140
- </button>
141
- </div>
142
- ```
143
- - After
144
- ```Javascript
145
- "div.test"._({
146
- style: {
147
- width: "5rem",
148
- height: 80,
149
- },
150
- test: "test"
151
- }, [
152
- "button"._([
153
- "img"._("https://xxxxxx")
154
- ])
155
- ]);
156
- ```
157
-
158
-
159
- ### Simplified Frontend Framework
160
-
161
- > [!NOTE]
162
- > RJS is a simplified frontend framework based on [QuickUI](https://pardn.ltd/QuickUI), designed for specific projects
163
- > - Renders using non-vDOM technology, enhancing performance and reducing complexity.
164
- > - Removes automatic listening and updating, giving developers manual control over update processes.
165
- > - Introduces `renew()` function to support precise updates of data and events.
166
-
167
- | Attribute | Description |
168
- | --- | --- |
169
- | `{{value}}` | Inserts text into HTML tags and automatically updates with data changes. |
170
- | `:path` | Used with the `temp` tag to load HTML fragments from external files into the current page. |
171
- | `:html` | Replaces the element's `innerHTML` with text. |
172
- | `:for` | Supports formats like `item in items`, `(item, index) in items`, `(key, value) in object`. Iterates over data collections to generate corresponding HTML elements. |
173
- | `:if`<br>`:else-if`<br>`:elif`<br>`:else` | Displays or hides elements based on specified conditions, enabling branching logic. |
174
- | `:model` | Binds data to form elements (e.g., `input`), updating data automatically when input changes. |
175
- | `:[attr]` | Sets element attributes, such as `ID`, `class`, image source, etc.<br>Examples: `:id`/`:class`/`:src`/`:alt`/`:href`... |
176
- | `:[css]` | Sets element CSS, such as margin, padding, etc. Examples: `:background-color`, `:opacity`, `:margin`, `:top`, `:position`... |
177
- | `@[event]` | Adds event listeners that trigger specified actions upon activation.<br>Examples: `@click`/`@input`/`@mousedown`... |
178
-
179
- - ##### Initializing `RJS`
180
- ```JavaScript
181
- const app = "(ComponentID)".RJS({
182
- data: {
183
- // Define data
184
- },
185
- event: {
186
- // Define events
187
- },
188
- when: {
189
- before_render: function () {
190
- // Executes before rendering (can stop rendering)
191
- // return false
192
- },
193
- rendered: function () {
194
- // Executes after rendering
195
- }
196
- }
197
- });
198
- ```
199
- - #### Updating `RJS`
200
- ```JavaScript
201
- app.renew({
202
- // data: Only include data items to update; unmentioned items retain initial values.
203
- // event: Only include event items to update; unmentioned items retain initial values.
204
- // when: Only include lifecycle logic to update; unmentioned items retain initial logic.
205
- });
206
- ```
207
-
208
63
  ## License
209
64
 
210
- Similar to MIT License but provides obfuscated code only:
211
- - Same as MIT: Free to use, modify and redistribute, including commercial use
212
- - Main difference: Provides obfuscated code by default, source code available for purchase
213
- - License terms: Must retain original copyright notice (same as MIT)
65
+ This project is licensed under the [MIT License](LICENSE).
214
66
 
215
- For detailed terms and conditions, please see the [Software Usage Agreement](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE).
67
+ ## Author
216
68
 
217
- ## Creator
218
-
219
- <img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;">
69
+ <img src="https://github.com/pardnchiu.png" align="left" width="96" height="96" style="margin-right: 0.5rem;">
220
70
 
221
71
  <h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
222
72
 
223
- <a href="mailto:dev@pardn.io" target="_blank">
224
- <img src="https://pardn.io/image/email.svg" width="48" height="48">
225
- </a> <a href="https://linkedin.com/in/pardnchiu" target="_blank">
226
- <img src="https://pardn.io/image/linkedin.svg" width="48" height="48">
227
- </a>
73
+ <a href="mailto:hi@pardn.io">hi@pardn.io</a><br>
74
+ <a href="https://www.linkedin.com/in/pardnchiu">https://www.linkedin.com/in/pardnchiu</a>
75
+
76
+ ## Stars
77
+
78
+ [![Star](https://api.star-history.com/svg?repos=pardnio/RenderJS&type=Date)](https://www.star-history.com/#pardnio/RenderJS&Date)
228
79
 
229
80
  ***
230
81
 
231
82
  ©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
232
-
package/package.json CHANGED
@@ -1,47 +1,47 @@
1
1
  {
2
- "name": "@pardnchiu/renderjs",
3
- "version": "2.0.1",
4
- "description": "A lightweight frontend rendering tool focusing on real-time DOM manipulation and flexible utilities for small to medium projects.",
5
- "main": "dist/RenderJS.js",
6
- "scripts": {
7
- "minify": "npx terser src/RenderJS.js -c -m -o dist/RenderJS.js --config-file terser.config.json --name-cache terser.cache.json",
8
- "minify-w": "chokidar 'src/RenderJS.js' -c 'npm run minify'"
9
- },
10
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "files": [
14
- "dist",
15
- "LICENSE",
16
- "README.md"
17
- ],
18
- "repository": {
19
- "type": "git",
20
- "url": "git+https://github.com/pardnchiu/RenderJS.git"
21
- },
22
- "keywords": [
23
- "javascript-library",
24
- "frontend-tool",
25
- "ui-tools",
26
- "pure-javascript",
27
- "native-api",
28
- "邱敬幃",
29
- "pardnchiu"
30
- ],
31
- "author": {
32
- "name": "邱敬幃 Pardn Chiu",
33
- "email": "dev@pardn.io",
34
- "url": "https://github.com/pardnchiu"
35
- },
36
- "license": "Proprietary",
37
- "bugs": {
38
- "url": "https://github.com/pardnchiu/RenderJS/issues",
39
- "email": "dev@pardn.io"
40
- },
41
- "homepage": "https://github.com/pardnchiu/RenderJS#readme",
42
- "devDependencies": {
43
- "chokidar-cli": "3.0.0",
44
- "terser": "5.31.3",
45
- "sass": "1.62.0"
46
- }
47
- }
2
+ "name": "@pardnchiu/renderjs",
3
+ "version": "2.0.2",
4
+ "description": "A lightweight frontend rendering tool focusing on real-time DOM manipulation and flexible utilities for small to medium projects.",
5
+ "main": "dist/RenderJS.js",
6
+ "scripts": {
7
+ "minify": "npx terser src/RenderJS.js -c -m -o dist/RenderJS.js --config-file terser.config.json --name-cache terser.cache.json",
8
+ "minify-w": "chokidar 'src/RenderJS.js' -c 'npm run minify'"
9
+ },
10
+ "publishConfig": {
11
+ "access": "public"
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "LICENSE",
16
+ "README.md"
17
+ ],
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/pardnio/RenderJS.git"
21
+ },
22
+ "keywords": [
23
+ "javascript-library",
24
+ "frontend-tool",
25
+ "ui-tools",
26
+ "pure-javascript",
27
+ "native-api",
28
+ "邱敬幃",
29
+ "pardnchiu"
30
+ ],
31
+ "author": {
32
+ "name": "邱敬幃 Pardn Chiu",
33
+ "email": "dev@pardn.io",
34
+ "url": "https://github.com/pardnchiu"
35
+ },
36
+ "license": "MIT",
37
+ "bugs": {
38
+ "url": "https://github.com/pardnio/RenderJS/issues",
39
+ "email": "dev@pardn.io"
40
+ },
41
+ "homepage": "https://github.com/pardnio/RenderJS#readme",
42
+ "devDependencies": {
43
+ "chokidar-cli": "3.0.0",
44
+ "terser": "5.31.3",
45
+ "sass": "1.62.0"
46
+ }
47
+ }
package/README.zh.md DELETED
@@ -1,232 +0,0 @@
1
- # RenderJS
2
-
3
- > [!NOTE]
4
- > (原名：PDRenderKit，自 `2.0.0` 版本起更名為 RenderJS)
5
-
6
- > RenderJS 是一個專注於 JavaScript 原生物件 prototype 擴展的輕量工具，提供強大的 DOM 操作能力與資料處理方法，減少重複代碼，提升開發效率。
7
-
8
- ![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
9
- ![size](https://img.shields.io/github/size/pardnchiu/RenderJS/dist%2FRenderJS.js)<br>
10
- [![npm](https://img.shields.io/npm/v/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)
11
- [![download](https://img.shields.io/npm/dm/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)
12
- [![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/renderjs)](https://www.jsdelivr.com/package/npm/@pardnchiu/renderjs)<br>
13
- [![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/RenderJS/blob/main/README.en.md)
14
-
15
-
16
- ## 特點
17
-
18
- ### DOM 操作簡化
19
-
20
- 使用簡潔的鏈式語法，輕鬆完成複雜的 DOM 操作。
21
-
22
- ### 增強查詢功能
23
-
24
- 透過簡化選擇器語法，快速獲取元素，支援單一與多元素選取。
25
-
26
- ### 預設多項擴展
27
-
28
- 預設多項 prototype 擴展，加速各種場景的開發。
29
-
30
- ### 即插即用
31
-
32
- 與現有 JavaScript 程式無縫整合，支持現代瀏覽器。
33
-
34
- ## 安裝方式
35
-
36
- ### 從 npm 安裝
37
-
38
- ```shell
39
- npm i @pardnchiu/renderjs
40
- ```
41
-
42
- ### 從 CDN 引入
43
-
44
- ```html
45
- <!-- 2.0.0 版本以上 -->
46
- <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>
47
-
48
- <!-- 1.5.2 版本以下 -->
49
- <script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>
50
- ```
51
-
52
- ## 功能介紹
53
-
54
- ### 擴展
55
-
56
- - #### Before
57
- ```javascript
58
- let section = document.createElement("section");
59
- section.id = "#test";
60
- document.body.appendChild(section);
61
-
62
- let button = document.createElement("button");
63
- button.style.width = "10rem";
64
- button.style.height = "2rem";
65
- button.style.backgroundColor = "steelblue";
66
- button.style.color = "fff";
67
- button.onclick = function(){
68
- alert("test")
69
- };
70
- button.innerHTML = "<span>test</span> button";
71
- section.appendChild(button);
72
-
73
- let svg = document.createElement("span");
74
- span.classList.add("svg");
75
- span.setAttribute("path", "https://xxxxxx");
76
- section.appendChild(span);
77
-
78
- let img = document.createElement("img");
79
- img.classList.add("lazyload");
80
- img.dataset.src = "https://xxxxxx";
81
- section.appendChild(img);
82
-
83
- let input = document.createElement("input");
84
- input.placeholder = "type";
85
- input.type = "email";
86
- section.appendChild(input);
87
- ```
88
- - #### After
89
- ```javascript
90
- document.body._child(
91
- "section#test"._([
92
- "button"._({
93
- style: {
94
- width: "10rem",
95
- hright: "2rem",
96
- backgroundColor: "steelblue",
97
- color: "#fff"
98
- }
99
- }, [
100
- // or "<span>test</span> button"
101
- "span"._("test"),
102
- " button"
103
- ])._click(function(){
104
- alert("test")
105
- }),
106
- "span.svg:._({ path: "https://xxxxxx" }),
107
- // No Lazy Loading => "img"._("https://xxxxxx"),
108
- "img"._({ lazyload: "https://xxxxxx" }),
109
- "input@email type"._()
110
- ])
111
- );
112
-
113
- _Listener({
114
- svg: true, // Add SVGListener, convert span.svg to svg tag
115
- lazyload: true // Add Lazy Listener, Lazy Loading images
116
- });
117
- ```
118
-
119
- - #### 獲取元素
120
- - Before
121
- ```javascript
122
- document.getElementById("test");
123
- document.querySelector("div.test");
124
- document.querySelectorAll("div.test");
125
- document.querySelector("input[name='test']");
126
- ```
127
- - After
128
- ```javascript
129
- "test".$;
130
- "div.test".$;
131
- "div.test".$all;
132
- "input[name='test']".$;
133
- ```
134
-
135
- - #### 添加元素
136
- - Before
137
- ```html
138
- <div class="test" style="width: 5rem; height: 80px;" test="test">
139
- <button>
140
- <img src="https://xxxxxx">
141
- </button>
142
- </div>
143
- ```
144
- - After
145
- ```Javascript
146
- "div.test"._({
147
- style: {
148
- width: "5rem",
149
- height: 80,
150
- },
151
- test: "test"
152
- }, [
153
- "button"._([
154
- "img"._("https://xxxxxx")
155
- ])
156
- ]);
157
- ```
158
-
159
- ### 簡化版前端框架
160
-
161
- > [!NOTE]
162
- > **RJS 是基於 [QuickUI](https://pardn.ltd/QuickUI) 的簡化版前端框架**，專為特定專案設計。<br>
163
- > - 使用非 vDOM 技術進行渲染，提升效能並降低複雜性。
164
- > - 移除自動監聽與自動更新功能，由開發者手動控制更新流程。
165
- > - 新增 `renew()` 函式，支援資料與事件的精確更新。
166
-
167
- - #### 可用屬性
168
- | tag | description |
169
- | --- | --- |
170
- | {{value}} | 將文字插入到 HTML 標籤中，並根據資料變更更新值。 |
171
- | :path | 將外部文件中的 HTML 片段加載到當前頁面。 |
172
- | :html | 使用文字替換元素的 innerHTML。 |
173
- | :for | 支持 item in items、(item, index) in items、(key, value) in object。<br>遍歷數據集合，為重複數據顯示生成相應的 HTML 元素。 |
174
- | :if<br>:else-if<br>:el-if<br>:else | 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。 |
175
- | :model | 將資料綁定到表單元素（如 input），當輸入更改時自動更新資料。 |
176
- | :[attr] | 設定元素屬性，例如 ID、class、圖像來源等。<br>例如：:id/:class/:src/:alt/:href... |
177
- | :[css] | |
178
- | @[event] | 添加事件監聽器，當事件觸發時執行指定操作。<br>例如：@click/@input/@mousedown... |
179
- - #### 初始化 `RJS`
180
- ```JavaScript
181
- const app = "(元件ID)".RJS({
182
- data: {
183
- // 定義資料
184
- },
185
- event: {
186
- // 定義事件
187
- },
188
- when: {
189
- before_render: function () {
190
- // 在渲染前執行（可停止渲染）
191
- // return false
192
- },
193
- rendered: function () {
194
- // 渲染完成後執行
195
- }
196
- }
197
- });
198
- ```
199
- - #### 更新 `RJS`
200
- ```JavaScript
201
- app.renew({
202
- // data: 僅填寫需要更新的資料項目，未填部分將保留初始化時的資料。
203
- // event: 僅填寫需要更新的事件項目，未填部分將保留初始化時的事件。
204
- // when: 僅填寫需要更新的生命周期邏輯，未填部分將保留初始化時的邏輯。
205
- });
206
- ```
207
-
208
- ## 授權條款
209
-
210
- 本專案採用類 MIT 授權，但僅提供混淆後的程式碼：
211
- - 與 MIT 相同：可自由使用、修改、再散布，包含商業用途
212
- - 主要差異：預設僅提供混淆版程式碼，原始碼需另外購買
213
- - 授權內容：必須保留原始版權聲明 (與 MIT 相同)
214
-
215
- 詳細條款與條件請參閱[軟體使用協議](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE)。
216
-
217
- ## 開發者
218
-
219
- <img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;">
220
-
221
- <h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
222
-
223
- <a href="mailto:dev@pardn.io" target="_blank">
224
- <img src="https://pardn.io/image/email.svg" width="48" height="48">
225
- </a> <a href="https://linkedin.com/in/pardnchiu" target="_blank">
226
- <img src="https://pardn.io/image/linkedin.svg" width="48" height="48">
227
- </a>
228
-
229
- ***
230
-
231
- ©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
232
-