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

로그인 후 복사

블록 삽입

> [!참고]
> 테스트할 때 브라우저에서 로컬 파일 제한을 비활성화하거나 라이브 서버를 사용하십시오.

:길

테스트.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 = 참
```
    <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

> [!참고]
> :[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");
            }
        }
    });

로그인 후 복사

CALC()

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>
```
로그인 후 복사

지연로드

:지연로드

index.html

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

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

로그인 후 복사

결과
```
    <p>UPPER lower</p>
```
로그인 후 복사

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>
```
로그인 후 복사

결과

    <img>

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

로그인 후 복사

i18n

> [!참고]
> 형식이 객체인 경우 다국어 콘텐츠를 직접 구성합니다.
> 형식이 문자열인 경우 언어 파일은 가져오기를 통해 동적으로 로드됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

QuickUI: 경량 프런트엔드 프레임워크

특징

설치

용법

개요

{{값}}

:html

:길

:을 위한

Nest loop

길이()

CALC()

상() / 하()

DATE(숫자, 형식)

:지연로드

SVG 교체

창조자

邱敬幃 Pardn Chiu

특허