QuickUI: leichtes Front-End-Framework

Ursprünglicher Name: PDQuickUI, ab Version 0.6.0 in QuickUI geändert
QuickUI ist ein rein in JavaScript entwickeltes Front-End-Rendering-Framework. Verbessern Sie die Rendering-Leistung durch die Integration der virtuellen DOM-Technologie, um eine schnelle Datenantwort und automatische Aktualisierungen zu erreichen.

Kernfunktionen

Effizientes virtuelles DOM

• Effiziente DOM-Aktualisierungen werden durch einen genauen Differenzvergleichsalgorithmus erreicht
• Intelligentes Attributaktualisierungssystem, aktualisiert nur geänderte Werte
• Intelligenter Unterknoten-Vergleichsmechanismus zur Minimierung von DOM-Vorgängen

Responsive Datenverarbeitung

• Umfassendes Datenüberwachungssystem, um sicherzustellen, dass Datenänderungen sofort berücksichtigt werden
• Aktualisieren Sie die Benutzeroberfläche automatisch, wenn sich Daten ändern, kein manueller Vorgang erforderlich
• Das intelligente Caching-System vermeidet unnötiges wiederholtes Rendern
• Unterstützt die reaktionsfähige Verarbeitung verschachtelter Datenstrukturen

Erweiterte Vorlagenfunktionen

• Eingebaute mehrsprachige Unterstützung (i18n) für einfache Internationalisierung
• Unterstützt das dynamische Laden von Vorlagen anstelle der synchronen Verarbeitung
• Leistungsstarkes Ausdruckssystem unterstützt Berechnung, Datums- und Textverarbeitung
• Komplettes Befehlssystem ermöglicht flexible DOM-Operationen

Leistungsoptimiertes Design

• Bilder und SVG-Inhalte verwenden die Lazy-Loading-Technologie, um die Ladegeschwindigkeit zu verbessern
• Sehr kleine Dateigröße und keine externen Abhängigkeiten
• Intelligente Ereignisdelegierung und Ressourcenbereinigungsmechanismus zur Optimierung der Speichernutzung

dokumentieren

• Website: nanomd.pardn.io
• Dokument: nanomd.pardn.io/doc.html

Installationsmethode

Von npm installieren

npm i @pardnchiu/quickui

Von CDN importiert

Vorstellung der QuickUI-Suite

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

Modulversion

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

Wie zu verwenden

QUI initialisieren

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

Immobilienübersicht

Text und Inhalt

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

Vorlage wird geladen

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

Listen und Iterationen

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

Bedingtes Rendern

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

Formularbindung

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

Stile und Animationen

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

Dynamische Eigenschaften

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

Event-Handling

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

Lizenzbedingungen

Dieses Projekt verwendet eine MIT-ähnliche Lizenz, es wird jedoch nur verschleierter Code bereitgestellt:

• Dasselbe wie MIT: freie Nutzung, Änderung und Weiterverbreitung, einschließlich kommerzieller Nutzung
• Hauptunterschied: Standardmäßig wird nur die verschleierte Version des Programmcodes bereitgestellt und der Quellcode muss separat erworben werden
• Lizenzierter Inhalt: Der ursprüngliche Urheberrechtsvermerk muss beibehalten werden (wie bei MIT)

Detaillierte Geschäftsbedingungen finden Sie in der Software-Nutzungsvereinbarung.

Entwickler

Qiu Jingguan

• E-Mail: dev@pardn.io
• Linkedin: LinkedIn.com/in/pardnchiu

---

©️ 2023 Pardn Chiu

Das obige ist der detaillierte Inhalt vonQuickUI: leichtes Front-End-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!