QuickUI: 軽量のフロントエンドフレームワーク-jsチュートリアル-php.cn

QuickUI: 軽量のフロントエンドフレームワーク

DDD

リリース： 2024-12-27 19:35:10

オリジナル

111 人が閲覧しました

QuickUI: 輕量化前端框架

元の名前: PDQuickUI、バージョン 0.6.0 から QuickUI に変更されました
QuickUI は、純粋に JavaScript で開発されたフロントエンドレンダリングフレームワークです。仮想 DOM テクノロジーを統合することでレンダリングパフォーマンスを向上させ、高速なデータ応答と自動更新を実現します。

コア機能

効率的な仮想 DOM

正確な差分比較アルゴリズムにより効率的な DOM 更新が実現されます
スマート属性更新システム、変更された値のみを更新します
DOM 操作を最小限に抑えるためのインテリジェントなサブノード比較メカニズム

レスポンシブなデータ処理

データ変更を即座に反映する詳細なデータ監視システム
データが変更されると UI が自動的に更新され、手動操作は不要です
スマートキャッシュシステムにより、不必要なレンダリングの繰り返しを回避します
ネストされたデータ構造の応答性の高い処理をサポートします

高度なテンプレート機能

簡単な国際化のための組み込みの多言語 (i18n) サポート
同期処理の代わりにテンプレートの動的読み込みをサポートします
強力な表現システムは、計算、日付、ワードプロセッサをサポートします
完全なコマンドシステムにより柔軟な DOM 操作が可能

パフォーマンスが最適化された設計

画像と SVG コンテンツは、読み込み速度を向上させるために遅延読み込みテクノロジーを使用しています
ファイルサイズが非常に小さく、外部依存関係がありません
メモリ使用量を最適化するインテリジェントなイベント委任とリソースクリーニングメカニズム

書類

ウェブサイト: nanomd.pardn.io
ドキュメント: nanomd.pardn.io/doc.html

設置方法

npmからインストール

npm i @pardnchiu/quickui

ログイン後にコピー

CDN からインポート

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>

ログイン後にコピー

モジュールのバージョン

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

ログイン後にコピー

使用方法

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

ログイン後にコピー