QuickUI: Lightweight Frontend Framework-JS Tutorial-php.cn

QuickUI: Lightweight Frontend Framework

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
```
Copy after login
Copy after login
Copy after login

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>

Copy after login

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

Copy after login

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
        }
    }
});

Copy after login

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

index.html
```
npm i @pardnchiu/quickui
```
Copy after login
Copy after login
Copy after login

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>

Copy after login

: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";

Copy after login

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
        }
    }
});

Copy after login

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

Copy after login

index.html
```
    <h1>test</h1>
```
Copy after login

Result

    const app = new QUI({
        id: "app",
        data: {
            html: "<b>innerHtml</b>"
        }
    });

Copy after login

Loop Rendering

:for

index.html
```
        <b>innerHtml</b>
```
Copy after login

Result

<h1>path heading</h1>
<p>path content</p>

Copy after login

Result

    const app = new QUI({
        id: "app"
    });

Copy after login

Conditional Rendering

index.html

    <h1>path heading</h1>
    <p>path content</p>

Copy after login

Result: heading = 1

    <ul>
        <li>{{ item }} {{ CALC(index + 1) }}</li>
    </ul>

    const app = new QUI({
        id: "app",
        data: {
            ary: ["test1", "test2", "test3"]
        }
    });

Copy after login

Result: heading = null && isH2 = true
```
    <li>
```
Copy after login

Nest loop

index.html


    <li>
        {{ key }}: {{ val.name }}
        
            
                {{ item.name }}
                
                    
                        {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
                    
                
            
        
    


    const app = new QUI({
        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 }
                            ]
                        }
                    ]
                }
            }
        }
    });

Copy after login

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>

Copy after login

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

Copy after login

Template Rendering

index.html
```
    <h1>test 1</h1>
```
Copy after login
result
```
    <h2>test </h2>
```
Copy after login

Binding

    <h3>test 3</h3>

Copy after login

Event

    <h4>test </h4>

Copy after login

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 }}"
                    ]
                }`
        }
    })

Copy after login

Result:
```
    hint 123
    <h1>test 123</h1>
```
Copy after login

Functions

LENGTH()

index.html


    test


    const app = new QUI({
        id: "app",
        data: {
            password: null,
        },
        event: {
            show: function(e){
                alert("Password:", app.data.password);
            }
        }
    });

Copy after login

result

    test


    const app = new QUI({
        id: "app",
        event: {
            test: function(e){
                alert(e.target.innerText + " clicked");
            }
        }
    });

Copy after login

CALC()

index.html

    test

    const app = new QUI({
        id: "app",
        data: {
            width: "100px",
            color: "red"
        }
    });

Copy after login

result
```
    test
```
Copy after login

UPPER() / LOWER()

index.html

    <p>Total: {{ LENGTH(array) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            array: [1, 2, 3, 4]
        }
    });

Copy after login

result
```
    <p>Total: 4</p>
```
Copy after login

DATE(num, format)

index.html

    <p>calc: {{ CALC(num * 10) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            num: 1
        }
    });

Copy after login

result
```
    <p>calc: 10</p>
```
Copy after login

Lazyload

:lazyload

index.html

    <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            test1: "upper",
            test2: "LOWER"
        }
    });

Copy after login

result
```
    <p>UPPER lower</p>
```
Copy after login

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)
        }
    });

Copy after login

index.html
```
    <p>2024-08-17 03:40:47</p>
```
Copy after login

result

    <img>

    const app = new QUI({
        id: "app",
        data: {
            image: "test.jpg"
        },
        option: {
            lazyload: true // Enable image lazy loading: true|false (default: true)
        }
    });

Copy after login

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">
```
Copy after login
index.html
Copy after login
Copy after login

result i18nLang = zh

    const app = new QUI({
        id: "app",
        data: {
            svg: "test.svg",
        },
        option: {
            svg: true  // Enable SVG file transformation: true|false (default: true)
        }
    });

Copy after login

result i18nLang = en
Copy after login
Copy after login

Lifecycle Hooks

{
    "greeting": "Hello",
    "username": "Username"
}

Copy after login

Data Retrieval

npm i @pardnchiu/quickui

Copy after login

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).

The above is the detailed content of QuickUI: Lightweight Frontend Framework. For more information, please follow other related articles on the PHP Chinese website!