GitHub
(Formerly known as PDQuickUI, renamed to QuickUI starting from version 0.6.0)
QuickUI is a front-end rendering framework derived from PDRenderKit, focusing on enhancing front-end framework features.
By integrating a virtual DOM, it rewrites the rendering logic to improve rendering efficiency, enabling faster data observation and automatic updates.
This project removes the prototype extensions from PDRenderKit to ensure compatibility and performance, making it suitable for complex applications.
It provides both module and non-module versions and changes the license from GPL-3.0 in PDRenderKit to MIT.
Features
- Clear Architecture: Separates UI from data logic, making it easier to maintain.
- Code Simplicity: Reduces redundant code and enhances readability.
- Automatic Rendering: Monitors data changes and updates automatically, minimizing manual operations.
- Lightweight: Maintains full functionality within a file size of less than 20kb.
Installation
-
Install from npm
npm i @pardnchiu/quickui
-
Include from CDN
-
Directly include QuickUI
<!-- Version 0.6.0 and above --> <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script> <!-- Version 0.5.4 and below --> <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
-
Module Version
// Version 0.6.0 and above import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js"; // Version 0.5.4 and below import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
-
Usage
-
Initialize QUI
const app = new QUI({ id: "", // Specify rendering element data: { // Custom DATA }, event: { // Custom EVENT }, when: { before_render: function () { // Stop rendering }, rendered: function () { // Rendered }, before_update: function () { // Stop updating }, updated: function () { // Updated }, before_destroy: function () { // Stop destruction }, destroyed: function () { // Destroyed } } });
Overview
Automatic Rendering: Automatically reloads when data changes are detected.
Attributes Overview
Attribute | Description |
---|---|
{{value}} | Inserts text into HTML tags and automatically updates with data changes. |
:path | Used with the temp tag to load HTML fragments from external files into the current page. |
:html | Replaces the element's innerHTML with text. |
:for | Supports formats like item in items, (item, index) in items, (key, value) in object. Iterates over data collections to generate corresponding HTML elements. |
:if :else-if :elif :else |
Displays or hides elements based on specified conditions, enabling branching logic. |
:model | Binds data to form elements (e.g., input), updating data automatically when input changes. |
:hide | Hides elements based on specific conditions. |
:animation | Specifies transition effects for elements, such as fade-in or expand, to enhance user experience. |
:mask | Controls block loading animations, supporting `true |
:[attr] | Sets element attributes, such as ID, class, image source, etc. Examples: :id/:class/:src/:alt/:href... |
:[css] | Sets element CSS, such as margin, padding, etc. Examples: :background-color, :opacity, :margin, :top, :position... |
@[event] | Adds event listeners that trigger specified actions upon activation. Examples: @click/@input/@mousedown... |
Text Replacement
{{value}}
-
index.html
npm i @pardnchiu/quickui
-
Result
<!-- Version 0.6.0 and above --> <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script> <!-- Version 0.5.4 and below --> <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
:html
-
index.html
// Version 0.6.0 and above import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js"; // Version 0.5.4 and below import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
-
Result
const app = new QUI({ id: "", // Specify rendering element data: { // Custom DATA }, event: { // Custom EVENT }, when: { before_render: function () { // Stop rendering }, rendered: function () { // Rendered }, before_update: function () { // Stop updating }, updated: function () { // Updated }, before_destroy: function () { // Stop destruction }, destroyed: function () { // Destroyed } } });
Insert Block
> [!NOTE]
> Ensure to disable local file restrictions in your browser or use a live server when testing.
:path
-
test.html
<h1>{{ title }}</h1> const app = new QUI({ id: "app", data: { title: "test" } });
-
index.html
<h1>test</h1>
-
Result
const app = new QUI({ id: "app", data: { html: "<b>innerHtml</b>" } });
Loop Rendering
:for
-
index.html
<b>innerHtml</b>
-
Result
<h1>path heading</h1> <p>path content</p>
-
Result
const app = new QUI({ id: "app" });
Conditional Rendering
-
index.html
<h1>path heading</h1> <p>path content</p>
-
Result: heading = 1
<ul> <li>{{ item }} {{ CALC(index + 1) }}</li> </ul> const app = new QUI({ id: "app", data: { ary: ["test1", "test2", "test3"] } });
-
Result: heading = null && isH2 = true
<li>
Nest loop
-
index.html
-
<li>
{{ key }}: {{ val.name }}
-
{{ item.name }}
- {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
-
{{ item.name }}
Result: heading = 3 && isH2 = null
<ul> <li>food: Food <ul> <li>Snacks <ul> <li>1. Potato Chips - </li> <li>2. Chocolate - </li> </ul> </li> <li>Beverages <ul> <li>1. Juice - </li> <li>2. Tea - </li> </ul> </li> </ul> </li> <li>home: Home <ul> <li>Furniture <ul> <li>1. Sofa - 0</li> <li>2. Table - 0</li> </ul> </li> <li>Decorations <ul> <li>1. Picture Frame - </li> <li>2. Vase - </li> </ul> </li> </ul> </li> </ul>
Result: heading = null && isH2 = null
<h1>{{ title }} {{ heading }}</h1> <h2>{{ title }} {{ heading }}</h2> <h3>{{ title }} {{ heading }}</h3> <h4>{{ title }} {{ heading }}</h4> const app = new QUI({ id: "app", data: { heading: [Number|null], isH2: [Boolean|null], title: "test" } });
Template Rendering
-
index.html
<h1>test 1</h1>
-
result
<h2>test </h2>
Binding
<h3>test 3</h3>
Event
<h4>test </h4>
CSS
> [!NOTE]
> Supports simple settings using :[CSS property], directly binding data to style attributes.
-
index.html
const test = new QUI({ id: "app", data: { hint: "hint 123", title: "test 123" }, render: () => { return ` "{{ hint }}", h1 { style: "background: red;", children: [ "{{ title }}" ] }` } })
-
Result:
hint 123 <h1>test 123</h1>
Functions
LENGTH()
-
index.html
test const app = new QUI({ id: "app", data: { password: null, }, event: { show: function(e){ alert("Password:", app.data.password); } } });
-
result
test const app = new QUI({ id: "app", event: { test: function(e){ alert(e.target.innerText + " clicked"); } } });
CALC()
-
index.html
test const app = new QUI({ id: "app", data: { width: "100px", color: "red" } });
-
result
test
UPPER() / LOWER()
-
index.html
<p>Total: {{ LENGTH(array) }}</p> const app = new QUI({ id: "app", data: { array: [1, 2, 3, 4] } });
-
result
<p>Total: 4</p>
DATE(num, format)
-
index.html
<p>calc: {{ CALC(num * 10) }}</p> const app = new QUI({ id: "app", data: { num: 1 } });
-
result
<p>calc: 10</p>
Lazyload
:lazyload
-
index.html
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p> const app = new QUI({ id: "app", data: { test1: "upper", test2: "LOWER" } });
-
result
<p>UPPER lower</p>
SVG replacement
-
test.svg
<p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p> const app = new QUI({ id: "app", data: { now: Math.floor(Date.now() / 1000) } });
-
index.html
<p>2024-08-17 03:40:47</p>
-
result
<img> const app = new QUI({ id: "app", data: { image: "test.jpg" }, option: { lazyload: true // Enable image lazy loading: true|false (default: true) } });
i18n
> [!NOTE]
> If the format is an object, the multilingual content is directly configured.
> If the format is a string, the language file is dynamically loaded via fetch.
-
en.json
<img src="test.jpg">
-
index.html
-
result i18nLang = zh
const app = new QUI({ id: "app", data: { svg: "test.svg", }, option: { svg: true // Enable SVG file transformation: true|false (default: true) } });
-
result i18nLang = en
Lifecycle Hooks
{ "greeting": "Hello", "username": "Username" }
Data Retrieval
npm i @pardnchiu/quickui
Creator
邱敬幃 Pardn Chiu
License
This project is licensed under a Proprietary License.
You may use, install, and run this software only under the terms specified in the End-User License Agreement (EULA).
?? 2024 邱敬幃 Pardn Chiu
The above is the detailed content of QuickUI: Lightweight Frontend Framework. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
