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

QuickUI: Lightweight Frontend Framework

GitHub

(以前は PDQuickUI として知られていましたが、バージョン 0.6.0 から QuickUI に名前変更されました)

QuickUI は、PDRenderKit から派生したフロントエンドレンダリングフレームワークで、フロントエンドフレームワークの機能の強化に重点を置いています。

仮想 DOM を統合することで、レンダリングロジックを書き換えてレンダリング効率を向上させ、より高速なデータ観察と自動更新を可能にします。

このプロジェクトは、互換性とパフォーマンスを確保するために PDRenderKit からプロトタイプ拡張機能を削除し、複雑なアプリケーションに適したものにします。

モジュールバージョンと非モジュールバージョンの両方が提供され、ライセンスが PDRenderKit の GPL-3.0 から MIT に変更されます。

特徴

明確なアーキテクチャ: UI をデータロジックから分離し、保守を容易にします。
コードの簡素化: 冗長なコードを削減し、可読性を高めます。
自動レンダリング: データの変更を監視し、自動的に更新し、手動操作を最小限に抑えます。
軽量: 20kb 未満のファイルサイズ内ですべての機能を維持します。

インストール

npm からインストール
```
npm i @pardnchiu/quickui
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

CDN から含める

QuickUI を直接インクルード

<!-- Version 0.6.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>

<!-- Version 0.5.4 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>

ログイン後にコピー

モジュールのバージョン

// Version 0.6.0 and above
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";

// Version 0.5.4 and below
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";

ログイン後にコピー

使用法

QUI を初期化します

const app = new QUI({
    id: "", // Specify rendering element
    data: {
        // Custom DATA
    },
    event: {
        // Custom EVENT
    },
    when: {
        before_render: function () {
            // Stop rendering
        },
        rendered: function () {
            // Rendered
        },
        before_update: function () {
            // Stop updating
        },
        updated: function () {
            // Updated
        },
        before_destroy: function () {
            // Stop destruction
        },
        destroyed: function () {
            // Destroyed
        }
    }
});

ログイン後にコピー

概要

自動レンダリング: データの変更が検出されると、自動的に再ロードされます。

属性の概要

Attribute	Description
{{value}}	Inserts text into HTML tags and automatically updates with data changes.
:path	Used with the temp tag to load HTML fragments from external files into the current page.
:html	Replaces the element's innerHTML with text.
:for	Supports formats like item in items, (item, index) in items, (key, value) in object. Iterates over data collections to generate corresponding HTML elements.
:if :else-if :elif :else	Displays or hides elements based on specified conditions, enabling branching logic.
:model	Binds data to form elements (e.g., input), updating data automatically when input changes.
:hide	Hides elements based on specific conditions.
:animation	Specifies transition effects for elements, such as fade-in or expand, to enhance user experience.
:mask	Controls block loading animations, supporting `true
:[attr]	Sets element attributes, such as ID, class, image source, etc. Examples: :id/:class/:src/:alt/:href...
:[css]	Sets element CSS, such as margin, padding, etc. Examples: :background-color, :opacity, :margin, :top, :position...
@[event]	Adds event listeners that trigger specified actions upon activation. Examples: @click/@input/@mousedown...

テキストの置換

index.html
```
npm i @pardnchiu/quickui
```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

結果

<!-- Version 0.6.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>

<!-- Version 0.5.4 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>

ログイン後にコピー

:html

index.html

// Version 0.6.0 and above
import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";

// Version 0.5.4 and below
import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";

ログイン後にコピー

結果

const app = new QUI({
    id: "", // Specify rendering element
    data: {
        // Custom DATA
    },
    event: {
        // Custom EVENT
    },
    when: {
        before_render: function () {
            // Stop rendering
        },
        rendered: function () {
            // Rendered
        },
        before_update: function () {
            // Stop updating
        },
        updated: function () {
            // Updated
        },
        before_destroy: function () {
            // Stop destruction
        },
        destroyed: function () {
            // Destroyed
        }
    }
});

ログイン後にコピー

ブロックを挿入

> [!NOTE]
>テスト時にはブラウザでローカルファイル制限を無効にするか、ライブサーバーを使用してください。

：パス

test.html

<h1>{{ title }}</h1>

    const app = new QUI({
        id: "app",
        data: {
            title: "test"
        }
    });

ログイン後にコピー

index.html
```
    <h1>test</h1>
```
ログイン後にコピー

結果

    const app = new QUI({
        id: "app",
        data: {
            html: "<b>innerHtml</b>"
        }
    });

ログイン後にコピー

ループレンダリング

：のために

index.html
```
        <b>innerHtml</b>
```
ログイン後にコピー

結果

<h1>path heading</h1>
<p>path content</p>

ログイン後にコピー

結果

    const app = new QUI({
        id: "app"
    });

ログイン後にコピー

条件付きレンダリング

index.html

    <h1>path heading</h1>
    <p>path content</p>

ログイン後にコピー

結果: 見出し = 1

    <ul>
        <li>{{ item }} {{ CALC(index + 1) }}</li>
    </ul>

    const app = new QUI({
        id: "app",
        data: {
            ary: ["test1", "test2", "test3"]
        }
    });

ログイン後にコピー

結果: 見出し = null && isH2 = true
```
    <li>
```
ログイン後にコピー

Nest loop

index.html


    <li>
        {{ key }}: {{ val.name }}
        
            
                {{ item.name }}
                
                    
                        {{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
                    
                
            
        
    


    const app = new QUI({
        id: "app",
        data: {
            obj: {
                food: {
                    name: "Food",
                    ary: [
                        {
                            name: 'Snacks',
                            ary1: [
                                { name: 'Potato Chips', price: 10 },
                                { name: 'Chocolate', price: 8 }
                            ]
                        },
                        {
                            name: 'Beverages',
                            ary1: [
                                { name: 'Juice', price: 5 },
                                { name: 'Tea', price: 3 }
                            ]
                        }
                    ]
                },
                home: {
                    name: 'Home',
                    ary: [
                        {
                            name: 'Furniture',
                            ary1: [
                                { name: 'Sofa', price: 300 },
                                { name: 'Table', price: 150 }
                            ]
                        },
                        {
                            name: 'Decorations',
                            ary1: [
                                { name: 'Picture Frame', price: 20 },
                                { name: 'Vase', price: 15 }
                            ]
                        }
                    ]
                }
            }
        }
    });

ログイン後にコピー

結果: 見出し = 3 && isH2 = null

<ul>
    <li>food: Food
        <ul>
            <li>Snacks
                <ul>
                    <li>1. Potato Chips - </li>
                    <li>2. Chocolate - </li>
                </ul>
                </li>
            <li>Beverages
                <ul>
                    <li>1. Juice - </li>
                    <li>2. Tea - </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>home: Home
        <ul>
            <li>Furniture
                <ul>
                    <li>1. Sofa - 0</li>
                    <li>2. Table - 0</li>
                </ul>
            </li>
            <li>Decorations
                <ul>
                    <li>1. Picture Frame - </li>
                    <li>2. Vase - </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ログイン後にコピー

結果: 見出し = null && isH2 = null

    <h1>{{ title }} {{ heading }}</h1>
    <h2>{{ title }} {{ heading }}</h2>
    <h3>{{ title }} {{ heading }}</h3>
    <h4>{{ title }} {{ heading }}</h4>

    const app = new QUI({
        id: "app",
        data: {
            heading: [Number|null],
            isH2: [Boolean|null],
            title: "test"
        }
    });

ログイン後にコピー

テンプレートのレンダリング

index.html
```
    <h1>test 1</h1>
```
ログイン後にコピー
結果
```
    <h2>test </h2>
```
ログイン後にコピー

バインディング

    <h3>test 3</h3>

ログイン後にコピー

イベント

    <h4>test </h4>

ログイン後にコピー

CSS

> [!NOTE]
> :[CSS プロパティ] を使用した簡単な設定をサポートし、データをスタイル属性に直接バインドします。

index.html

    const test = new QUI({
        id: "app",
        data: {
            hint: "hint 123",
            title: "test 123"
        },
        render: () => {
            return `
                "{{ hint }}",
                h1 {
                    style: "background: red;", 
                    children: [ 
                        "{{ title }}"
                    ]
                }`
        }
    })

ログイン後にコピー

結果:
```
    hint 123
    <h1>test 123</h1>
```
ログイン後にコピー

機能

長さ（）

index.html


    test


    const app = new QUI({
        id: "app",
        data: {
            password: null,
        },
        event: {
            show: function(e){
                alert("Password:", app.data.password);
            }
        }
    });

ログイン後にコピー

結果

    test


    const app = new QUI({
        id: "app",
        event: {
            test: function(e){
                alert(e.target.innerText + " clicked");
            }
        }
    });

ログイン後にコピー

計算()

index.html

    test

    const app = new QUI({
        id: "app",
        data: {
            width: "100px",
            color: "red"
        }
    });

ログイン後にコピー

結果
```
    test
```
ログイン後にコピー

アッパー() / ロアー()

index.html

    <p>Total: {{ LENGTH(array) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            array: [1, 2, 3, 4]
        }
    });

ログイン後にコピー

結果
```
    <p>Total: 4</p>
```
ログイン後にコピー

DATE(数値、形式)

index.html

    <p>calc: {{ CALC(num * 10) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            num: 1
        }
    });

ログイン後にコピー

結果
```
    <p>calc: 10</p>
```
ログイン後にコピー

レイジーロード

:lazyload

index.html

    <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            test1: "upper",
            test2: "LOWER"
        }
    });

ログイン後にコピー

結果
```
    <p>UPPER lower</p>
```
ログイン後にコピー

SVGの置換

テスト.svg

    <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>

    const app = new QUI({
        id: "app",
        data: {
            now: Math.floor(Date.now() / 1000)
        }
    });

ログイン後にコピー

index.html
```
    <p>2024-08-17 03:40:47</p>
```
ログイン後にコピー

結果

    <img>

    const app = new QUI({
        id: "app",
        data: {
            image: "test.jpg"
        },
        option: {
            lazyload: true // Enable image lazy loading: true|false (default: true)
        }
    });

ログイン後にコピー

i18n

> [!NOTE]
>形式がオブジェクトの場合、多言語コンテンツが直接設定されます。
>形式が文字列の場合、言語ファイルはフェッチを通じて動的にロードされます。

en.json
```
    <img src="test.jpg">
```
ログイン後にコピー
index.html
ログイン後にコピー
ログイン後にコピー

結果 i18nLang = zh

    const app = new QUI({
        id: "app",
        data: {
            svg: "test.svg",
        },
        option: {
            svg: true  // Enable SVG file transformation: true|false (default: true)
        }
    });

ログイン後にコピー

結果 i18nLang = en
ログイン後にコピー
ログイン後にコピー

ライフサイクルフック

{
    "greeting": "Hello",
    "username": "Username"
}

ログイン後にコピー

データの取得

npm i @pardnchiu/quickui

ログイン後にコピー

クリエイター

邱敬幃 Pardn Chiu

ライセンス

このプロジェクトは、独自のライセンスに基づいてライセンスされています。

このソフトウェアは、エンドユーザー使用許諾契約 (EULA) に指定されている条件に基づいてのみ使用、インストール、実行できます。

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

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

特徴

インストール

使用法

概要

{{価値}}

:html

：パス

：のために

Nest loop

長さ（）

計算()

アッパー() / ロアー()

DATE(数値、形式)

:lazyload

SVGの置換

クリエイター

邱敬幃 Pardn Chiu

ライセンス

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