QuickUI : framework front-end léger-js tutoriel-php.cn

QuickUI : framework front-end léger

DDD

Libérer： 2024-12-27 19:35:10

original

114 Les gens l'ont consulté

QuickUI: 輕量化前端框架

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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 () {
            // 已銷毀
        }
    }
});

Copier après la connexion

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.