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

QuickUI: Leichtes Frontend-Framework

Mary-Kate Olsen
Freigeben: 2024-12-26 08:23:09
Original
477 Leute haben es durchsucht

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
    
    Nach dem Login kopieren
    Nach dem Login kopieren
    Nach dem Login kopieren
  • 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>
      
      Nach dem Login kopieren
      Nach dem Login kopieren
    • 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";
      
      Nach dem Login kopieren
      Nach dem Login kopieren

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
            }
        }
    });
    
    Nach dem Login kopieren
    Nach dem Login kopieren

Ü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

{{Wert}}

  • index.html

    npm i @pardnchiu/quickui
    
    Nach dem Login kopieren
    Nach dem Login kopieren
    Nach dem Login kopieren
  • 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>
    
    Nach dem Login kopieren
    Nach dem Login kopieren

: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";
    
    Nach dem Login kopieren
    Nach dem Login kopieren
  • 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
            }
        }
    });
    
    Nach dem Login kopieren
    Nach dem Login kopieren

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"
            }
        });
    
    
    Nach dem Login kopieren
  • index.html

        <h1>test</h1>
    
    
    Nach dem Login kopieren
  • Ergebnis

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

Loop-Rendering

:für

  • index.html

            <b>innerHtml</b>
    
    
    Nach dem Login kopieren
  • Ergebnis

    <h1>path heading</h1>
    <p>path content</p>
    
    Nach dem Login kopieren
  • Ergebnis

        const app = new QUI({
            id: "app"
        });
    
    
    Nach dem Login kopieren

Bedingtes Rendering

  • index.html

        <h1>path heading</h1>
        <p>path content</p>
    
    
    Nach dem Login kopieren
  • Ergebnis: Überschrift = 1

        <ul>
            <li>{{ item }} {{ CALC(index + 1) }}</li>
        </ul>
    
        const app = new QUI({
            id: "app",
            data: {
                ary: ["test1", "test2", "test3"]
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis: heading = null && isH2 = wahr

        <li>
    
    Nach dem Login kopieren

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 } ] } ] } } } });
    Nach dem Login kopieren
  • 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>
    
    
    Nach dem Login kopieren
  • 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"
            }
        });
    
    
    Nach dem Login kopieren

Vorlagen-Rendering

  • index.html

        <h1>test 1</h1>
    
    
    Nach dem Login kopieren
  • Ergebnis

        <h2>test </h2>
    
    
    Nach dem Login kopieren

Bindend

    <h3>test 3</h3>

Nach dem Login kopieren

Veranstaltung

    <h4>test </h4>

Nach dem Login kopieren

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 }}"
                        ]
                    }`
            }
        })
    
    
    Nach dem Login kopieren
  • Ergebnis:

        hint 123
        <h1>test 123</h1>
    
    
    Nach dem Login kopieren

Funktionen

LÄNGE()

  • index.html

    
        test
    
    
        const app = new QUI({
            id: "app",
            data: {
                password: null,
            },
            event: {
                show: function(e){
                    alert("Password:", app.data.password);
                }
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis

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

CALC()

  • index.html

        test
    
        const app = new QUI({
            id: "app",
            data: {
                width: "100px",
                color: "red"
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis

        test
    
    
    Nach dem Login kopieren

UPPER() / LOWER()

  • index.html

        <p>Total: {{ LENGTH(array) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                array: [1, 2, 3, 4]
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis

        <p>Total: 4</p>
    
    
    Nach dem Login kopieren

DATUM(Anzahl, Format)

  • index.html

        <p>calc: {{ CALC(num * 10) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                num: 1
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis

        <p>calc: 10</p>
    
    
    Nach dem Login kopieren

Lazyload

:lazyload

  • index.html

        <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
    
        const app = new QUI({
            id: "app",
            data: {
                test1: "upper",
                test2: "LOWER"
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis

        <p>UPPER lower</p>
    
    
    Nach dem Login kopieren

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)
            }
        });
    
    
    Nach dem Login kopieren
  • index.html

        <p>2024-08-17 03:40:47</p>
    
    
    Nach dem Login kopieren
  • Ergebnis

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

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">
    
    
    Nach dem Login kopieren
  • index.html

    Nach dem Login kopieren
    Nach dem Login kopieren
  • Ergebnis i18nLang = zh

        const app = new QUI({
            id: "app",
            data: {
                svg: "test.svg",
            },
            option: {
                svg: true  // Enable SVG file transformation: true|false (default: true)
            }
        });
    
    
    Nach dem Login kopieren
  • Ergebnis i18nLang = en

    Nach dem Login kopieren
    Nach dem Login kopieren

Lebenszyklus-Hooks

{
    "greeting": "Hello",
    "username": "Username"
}
Nach dem Login kopieren

Datenabruf

npm i @pardnchiu/quickui
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

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.


©️ 2024 邱敬幃 Pardn Chiu

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!

Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage