recherche

Maison >interface Web >js tutoriel >QuickUI : framework frontend léger

QuickUI : framework frontend léger

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-26 08:23:09395parcourir

QuickUI: Lightweight Frontend Framework

GitHub

(Anciennement connu sous le nom de PDQuickUI, renommé QuickUI à partir de la version 0.6.0)

QuickUI est un framework de rendu frontal dérivé de PDRenderKit, axé sur l'amélioration des fonctionnalités du framework front-end.

En intégrant un DOM virtuel, il réécrit la logique de rendu pour améliorer l'efficacité du rendu, permettant une observation plus rapide des données et des mises à jour automatiques.

Ce projet supprime les extensions prototypes de PDRenderKit pour garantir la compatibilité et les performances, le rendant ainsi adapté aux applications complexes.

Il fournit des versions module et non module et modifie la licence de GPL-3.0 dans PDRenderKit en MIT.

Caractéristiques

  • Architecture claire : sépare l'interface utilisateur de la logique des données, ce qui facilite sa maintenance.
  • Simplicité du code : réduit le code redondant et améliore la lisibilité.
  • Rendu automatique : surveille automatiquement les modifications et les mises à jour des données, minimisant ainsi les opérations manuelles.
  • Léger : conserve toutes les fonctionnalités dans une taille de fichier inférieure à 20 Ko.

Installation

  • Installer depuis npm

    npm i @pardnchiu/quickui

  • Inclure depuis le CDN

    • Inclure directement 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>

    • Version du module

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

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

Aperçu

Rendu automatique : recharge automatiquement lorsque des modifications de données sont détectées.

Aperçu des attributs

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

Remplacement de texte

{{valeur}}

  • index.html

    npm i @pardnchiu/quickui

  • Résultat

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

  • Résultat

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

Insérer un bloc

> [!NOTE]
> Assurez-vous de désactiver les restrictions de fichiers locaux dans votre navigateur ou d'utiliser un serveur en direct lors des tests.

:chemin

  • test.html

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

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

  • index.html

        <h1>test</h1>

  • Résultat

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

Rendu de boucle

:pour

  • index.html

            <b>innerHtml</b>

  • Résultat

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

  • Résultat

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

Rendu conditionnel

  • index.html

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

  • Résultat : rubrique = 1

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

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

  • Résultat : rubrique = null && isH2 = vrai

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

  • Résultat : rubrique = 3 && isH2 = nul

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

  • Résultat : rubrique = null && isH2 = nul

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

Rendu du modèle

  • index.html

        <h1>test 1</h1>

  • résultat

        <h2>test </h2>

Reliure

    <h3>test 3</h3>

Événement

    <h4>test </h4>

CSS

> [!NOTE]
> Prend en charge des paramètres simples à l'aide de :[Propriété CSS], liant directement les données aux attributs de style.

  • index.html

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

  • Résultat :

        hint 123
    <h1>test 123</h1>

Fonctions

LONGUEUR()

  • index.html

    
    test


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

  • résultat

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

  • résultat

        test

SUPÉRIEUR() / INFÉRIEUR()

  • index.html

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

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

  • résultat

        <p>Total: 4</p>

DATE(numéro, format)

  • index.html

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

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

  • résultat

        <p>calc: 10</p>

Lazyload

:chargement paresseux

  • index.html

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

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

  • résultat

        <p>UPPER lower</p>

Remplacement SVG

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

  • résultat

        <img>

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

i18n

> [!NOTE]
> Si le format est un objet, le contenu multilingue est directement configuré.
> Si le format est une chaîne, le fichier de langue est chargé dynamiquement via fetch.

  • en.json

        <img src="test.jpg">

  • index.html

    

    • 

  • 

    résultat i18nLang = zh
    

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


    

    • 

  • 

    résultat i18nLang = fr
    

    

    • 




Crochets de cycle de vie


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



Récupération de données


npm i @pardnchiu/quickui




  
  
  Créateur




邱敬幃 Pardn Chiu




  
  
  Licence




Ce projet est sous licence sous une Licence propriétaire.


Vous pouvez utiliser, installer et exécuter ce logiciel uniquement selon les conditions spécifiées dans le contrat de licence d'utilisateur final (CLUF).







©️ 2024 邱敬幃 Pardn Chiu



          

            
        
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
json css less html npm String Object NULL if for date format include using class Length Conditional Attribute Property Event dom this prototype href innerHTML position margin padding background transition animation input github ui
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Rust pour les développeurs JavaScript : votre premier module WebAssemblyArticle suivant：Rust pour les développeurs JavaScript : votre premier module WebAssembly
Articles Liés
Voir plus