QuickUI : framework frontend léger

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!