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

物件概要

テキストとコンテンツ

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

テンプレートの読み込み

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

リストと反復

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

条件付きレンダリング

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

フォームバインディング

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

スタイルとアニメーション

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

動的プロパティ

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

イベント処理

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

ライセンス条項

このプロジェクトは MIT のようなライセンスを採用していますが、難読化されたコードのみが提供されています:

• MIT と同様: 商用利用を含め、自由に使用、変更、再配布できます
• 主な違い: デフォルトでは難読化されたバージョンのプログラム コードのみが提供され、ソース コードは別途購入する必要があります
• ライセンスされたコンテンツ: オリジナルの著作権表示は保持する必要があります (MIT と同じ)

詳細な利用規約については、ソフトウェア使用契約を参照してください。

開発者

邱京関

• メール: dev@pardn.io
• Linkedin: linkedin.com/in/pardnchiu

---

©️ 2023 Pardn Chiu

以上がQuickUI: 軽量のフロントエンド フレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。