Heim >Web-Frontend >js-Tutorial >QuickUI: Leichtes Frontend-Framework

QuickUI: Leichtes Frontend-Framework

Mary-Kate OlsenOriginal: 2024-12-26 08:23:09391Durchsuche

QuickUI: Lightweight Frontend Framework

GitHub

(Früher bekannt als PDQuickUI, ab Version 0.6.0 in QuickUI umbenannt)

QuickUI ist ein von PDRenderKit abgeleitetes Front-End-Rendering-Framework, das sich auf die Verbesserung der Front-End-Framework-Funktionen konzentriert.

Durch die Integration eines virtuellen DOM wird die Rendering-Logik neu geschrieben, um die Rendering-Effizienz zu verbessern und eine schnellere Datenbeobachtung und automatische Aktualisierungen zu ermöglichen.

Dieses Projekt entfernt die Prototyp-Erweiterungen aus PDRenderKit, um Kompatibilität und Leistung sicherzustellen und es für komplexe Anwendungen geeignet zu machen.

Es stellt sowohl Modul- als auch Nicht-Modulversionen bereit und ändert die Lizenz von GPL-3.0 in PDRenderKit auf MIT.

Merkmale

Klare Architektur: Trennt die Benutzeroberfläche von der Datenlogik und erleichtert so die Wartung.
Code-Einfachheit: Reduziert redundanten Code und verbessert die Lesbarkeit.
Automatisches Rendering: Überwacht Datenänderungen und -aktualisierungen automatisch und minimiert so manuelle Vorgänge.
Leichtgewicht: Behält die volle Funktionalität bei einer Dateigröße von weniger als 20 KB.

Installation

Von npm installieren
```
npm i @pardnchiu/quickui
```

Aus CDN einbinden

QuickUI direkt einbinden

<!-- 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>

Modulversion

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

Verwendung

QUI initialisieren

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

Überblick

Automatisches Rendern: Lädt automatisch neu, wenn Datenänderungen erkannt werden.

Attributübersicht

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

Textersetzung

index.html
```
npm i @pardnchiu/quickui
```

Ergebnis

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

Ergebnis

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

Block einfügen

> [!NOTE]
> Stellen Sie sicher, dass Sie lokale Dateibeschränkungen in Ihrem Browser deaktivieren oder beim Testen einen Live-Server verwenden.

:Weg

test.html

<h1>{{ title }}</h1>

    const app = new QUI({
        id: "app",
        data: {
            title: "test"
        }
    });

index.html
```
    <h1>test</h1>
```

Ergebnis

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

Loop-Rendering

:für

index.html
```
        <b>innerHtml</b>
```

Ergebnis

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

Ergebnis

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

Bedingtes Rendering

index.html

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

Ergebnis: Überschrift = 1

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

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

Ergebnis: heading = null && isH2 = wahr
```
    <li>
```

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

Ergebnis: Überschrift = 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>

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

Vorlagen-Rendering

index.html
```
    <h1>test 1</h1>
```
Ergebnis
```
    <h2>test </h2>
```

Bindend

    <h3>test 3</h3>

Veranstaltung

    <h4>test </h4>

CSS

> [!NOTE]
> Unterstützt einfache Einstellungen mithilfe von:[CSS-Eigenschaft] und bindet Daten direkt an Stilattribute.

index.html

    const test = new QUI({
        id: "app",
        data: {
            hint: "hint 123",
            title: "test 123"
        },
        render: () => {
            return `
                "{{ hint }}",
                h1 {
                    style: "background: red;", 
                    children: [ 
                        "{{ title }}"
                    ]
                }`
        }
    })

Ergebnis:
```
    hint 123
    <h1>test 123</h1>
```

Funktionen

LÄNGE()

index.html


    test


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

Ergebnis

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

Ergebnis
```
    test
```

UPPER() / LOWER()

index.html

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

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

Ergebnis
```
    <p>Total: 4</p>
```

DATUM(Anzahl, Format)

index.html

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

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

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

Ergebnis
```
    <p>UPPER lower</p>
```

SVG-Ersatz

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>
```

Ergebnis

    <img>

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

i18n

> [!NOTE]
> Wenn das Format ein Objekt ist, wird der mehrsprachige Inhalt direkt konfiguriert.
> Wenn das Format ein String ist, wird die Sprachdatei dynamisch per fetch geladen.

en.json
```
    <img src="test.jpg">
```
index.html

Ergebnis i18nLang = zh

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

Ergebnis i18nLang = en

Lebenszyklus-Hooks

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

Datenabruf

npm i @pardnchiu/quickui

Schöpfer

邱敬幃 Pardn Chiu

Lizenz

Dieses Projekt ist unter einer proprietären Lizenz lizenziert.

Sie dürfen diese Software nur unter den in der Endbenutzer-Lizenzvereinbarung (EULA) festgelegten Bedingungen verwenden, installieren und ausführen.

Das obige ist der detaillierte Inhalt vonQuickUI: Leichtes Frontend-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Rust für JavaScript-Entwickler: Ihr erstes WebAssembly-ModulNächster Artikel：Rust für JavaScript-Entwickler: Ihr erstes WebAssembly-Modul

In Verbindung stehende Artikel

Mehr sehen

QuickUI: Leichtes Frontend-Framework

Merkmale

Installation

Verwendung

Überblick

{{Wert}}

:html

:Weg

:für

Nest loop

LÄNGE()

CALC()

UPPER() / LOWER()

DATUM(Anzahl, Format)

:lazyload

SVG-Ersatz

Schöpfer

邱敬幃 Pardn Chiu

Lizenz

In Verbindung stehende Artikel