Rumah >hujung hadapan web >tutorial js >QuickUI: Rangka Kerja Bahagian Hadapan Ringan

QuickUI: Rangka Kerja Bahagian Hadapan Ringan

Mary-Kate Olsenasal: 2024-12-26 08:23:09457semak imbas

QuickUI: Lightweight Frontend Framework

GitHub

(Dulu dikenali sebagai PDQuickUI, dinamakan semula kepada QuickUI bermula dari versi 0.6.0)

QuickUI ialah rangka kerja pemaparan bahagian hadapan yang diperoleh daripada PDRenderKit, memfokuskan pada mempertingkatkan ciri rangka kerja bahagian hadapan.

Dengan menyepadukan DOM maya, ia menulis semula logik pemaparan untuk meningkatkan kecekapan pemaparan, mendayakan pemerhatian data yang lebih pantas dan kemas kini automatik.

Projek ini mengalih keluar sambungan prototaip daripada PDRenderKit untuk memastikan keserasian dan prestasi, menjadikannya sesuai untuk aplikasi yang kompleks.

Ia menyediakan kedua-dua versi modul dan bukan modul serta menukar lesen daripada GPL-3.0 dalam PDRenderKit kepada MIT.

Ciri-ciri

Seni Bina Jelas: Mengasingkan UI daripada logik data, menjadikannya lebih mudah untuk diselenggara.
Kesederhanaan Kod: Mengurangkan kod berlebihan dan meningkatkan kebolehbacaan.
Perenderan Automatik: Memantau perubahan data dan mengemas kini secara automatik, meminimumkan operasi manual.
Ringan: Mengekalkan fungsi penuh dalam saiz fail kurang daripada 20kb.

Pemasangan

Pasang daripada npm
```
npm i @pardnchiu/quickui
```

Sertakan daripada CDN

Sertakan QuickUI secara langsung

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

Versi Modul

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

Penggunaan

Mulakan 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
        }
    }
});

Gambaran keseluruhan

Perenderan Automatik: Muat semula secara automatik apabila perubahan data dikesan.

Gambaran Keseluruhan Atribut

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

Penggantian Teks

index.html
```
npm i @pardnchiu/quickui
```

Keputusan

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

Keputusan

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
        }
    }
});

Sisipkan Blok

> [!NOTA]
> Pastikan untuk melumpuhkan sekatan fail setempat dalam penyemak imbas anda atau gunakan pelayan langsung semasa menguji.

:jalan

test.html

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

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

index.html
```
    <h1>test</h1>
```

Keputusan

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

Perenderan Gelung

: untuk

index.html
```
        <b>innerHtml</b>
```

Keputusan

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

Keputusan

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

Pemarahan Bersyarat

index.html

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

Keputusan: tajuk = 1

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

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

Keputusan: tajuk = batal && isH2 = benar
```
    <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 }
                            ]
                        }
                    ]
                }
            }
        }
    });

Keputusan: tajuk = 3 && isH2 = batal

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

Keputusan: tajuk = batal && isH2 = batal

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

Perenderan Templat

index.html
```
    <h1>test 1</h1>
```
hasil
```
    <h2>test </h2>
```

Mengikat

    <h3>test 3</h3>

Acara

    <h4>test </h4>

CSS

> [!NOTA]
> Menyokong tetapan mudah menggunakan :[sifat CSS], mengikat data secara langsung kepada atribut gaya.

index.html

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

Keputusan:
```
    hint 123
    <h1>test 123</h1>
```

Fungsi

LENGTH()

index.html


    test


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

hasil

    test


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

CALC()

index.html

    test

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

hasil
```
    test
```

ATAS() / BAWAH()

index.html

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

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

hasil
```
    <p>Total: 4</p>
```

DATE(bilangan, format)

index.html

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

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

hasil
```
    <p>calc: 10</p>
```

Lazyload

:lazyload

index.html

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

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

hasil
```
    <p>UPPER lower</p>
```

Penggantian SVG

test.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>
```

hasil

    <img>

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

i18n

> [!NOTA]
> Jika format ialah objek, kandungan berbilang bahasa dikonfigurasikan secara langsung.
> Jika format ialah rentetan, fail bahasa dimuatkan secara dinamik melalui pengambilan.

en.json
```
    <img src="test.jpg">
```
index.html

hasil i18nLang = zh

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

hasil i18nLang = en

Kait Kitar Hidup

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

Pendapatan Data

npm i @pardnchiu/quickui

Pencipta

邱敬幃 Pardn Chiu

Lesen

Projek ini dilesenkan di bawah Lesen Milik.

Anda boleh menggunakan, memasang dan menjalankan perisian ini hanya di bawah syarat yang dinyatakan dalam Perjanjian Lesen Pengguna Akhir (EULA).

Atas ialah kandungan terperinci QuickUI: Rangka Kerja Bahagian Hadapan Ringan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Rust for JavaScript Developers: Modul WebAssembly Pertama AndaArtikel seterusnya：Rust for JavaScript Developers: Modul WebAssembly Pertama Anda

Artikel berkaitan

Lihat lagi

QuickUI: Rangka Kerja Bahagian Hadapan Ringan

Ciri-ciri

Pemasangan

Penggunaan

Gambaran keseluruhan

{{nilai}}

:html

:jalan

: untuk

Nest loop

LENGTH()

CALC()

ATAS() / BAWAH()

DATE(bilangan, format)

:lazyload

Penggantian SVG

Pencipta

邱敬幃 Pardn Chiu

Lesen

Artikel berkaitan