QuickUI : framework front-end léger

Nom original : PDQuickUI, remplacé par QuickUI à partir de la version 0.6.0
QuickUI est un framework de rendu frontal développé uniquement en JavaScript. Améliorez les performances de rendu en intégrant la technologie DOM virtuel pour obtenir une réponse rapide des données et des mises à jour automatiques.

Fonctionnalités principales

DOM virtuel efficace

• Des mises à jour efficaces du DOM sont obtenues grâce à un algorithme de comparaison de différences précis
• Système de mise à jour des attributs intelligents, met à jour uniquement les valeurs modifiées
• Mécanisme intelligent de comparaison de sous-nœuds pour minimiser les opérations DOM

Traitement des données réactif

• Système de surveillance approfondie des données pour garantir une réflexion immédiate des modifications des données
• Mettre automatiquement à jour l'interface utilisateur lorsque les données changent, aucune opération manuelle requise
• Le système de mise en cache intelligent évite les rendus répétés inutiles
• Prend en charge le traitement réactif des structures de données imbriquées

Fonctionnalités avancées du modèle

• Prise en charge multilingue (i18n) intégrée pour une internationalisation facile
• Prend en charge le chargement dynamique des modèles au lieu du traitement synchrone
• Un système d'expression puissant prend en charge le calcul, la date et le traitement de texte
• Le système de commande complet permet des opérations DOM flexibles

Conception optimisée pour les performances

• Les images et le contenu SVG utilisent la technologie de chargement paresseux pour améliorer la vitesse de chargement
• Très petite taille de fichier et aucune dépendance externe
• Mécanisme intelligent de délégation d'événements et de nettoyage des ressources pour optimiser l'utilisation de la mémoire

document

• Site Web : nanomd.pardn.io
• Document : nanomd.pardn.io/doc.html

Méthode d'installation

Installer à partir de npm

npm i @pardnchiu/quickui

Importé du CDN

Présentation de la suite QuickUI

<!-- 0.6.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@%5BVERSION%5D/dist/QuickUI.js"></script>

<!-- 0.5.4 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@%5BVERSION%5D/dist/PDQuickUI.js"></script>

Version du module

// 0.6.0 版本以上
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";

// 0.5.4 版本以下
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";

Comment utiliser

Initialiser QUI

const app = new QUI({
    id: "", // 指定渲染元素
    data: {
        // 自訂 DATA
    },
    event: {
        // 自訂 EVENT
    },
    when: {
        before_render: function () {
            // 停止渲染
        },
        rendered: function () {
            // 已渲染
        },
        before_update: function () {
            // 停止更新
        },
        updated: function () {
            // 已更新
        },
        before_destroy: function () {
            // 停止銷毀
        },
        destroyed: function () {
            // 已銷毀
        }
    }
});

Aperçu de la propriété

texte et contenu

屬性	使用場景	範例
{{ value }}	動態文字內容	{{ userName }} 顯示使用者名稱
:html	原始 HTML 插入	渲染格式化內容

Chargement du modèle

屬性	使用場景	範例
:path	外部模板載入	載入頁首元件

Listes et itérations

屬性	使用場景	範例
:for	陣列/物件迭代	{{ item.name }} 渲染列表項目

Rendu conditionnel

屬性	使用場景	範例
:if	條件顯示	歡迎！
:else-if/:elif	次要條件	載入中...
:else	預設內容	請登入

liaison de formulaire

屬性	使用場景	範例
:model	雙向資料綁定	與資料同步

Styles et animations

屬性	使用場景	範例
:animation	過渡效果	內容
:[css]	動態樣式	樣式內容

Propriétés dynamiques

屬性	使用場景	範例
:[attr]	動態屬性

gestion des événements

屬性	使用場景	範例
@[event]	事件監聽器	點擊我

Conditions de licence

Ce projet adopte une licence de type MIT, mais seul du code obscurci est fourni :

• Identique au MIT : libre d'utilisation, de modification et de redistribution, y compris l'utilisation commerciale
• Principale différence : seule la version masquée du code du programme est fournie par défaut et le code source doit être acheté séparément
• Contenu sous licence : l'avis de droit d'auteur original doit être conservé (identique au MIT)

Veuillez vous référer à l'accord d'utilisation du logiciel pour connaître les conditions générales détaillées.

Promoteur

Qiu Jingguan

• E-mail : dev@pardn.io
• Linkedin : linkedin.com/in/pardnchiu

---

©️ 2023 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!