搜索

首页 >web前端 >js教程 >QuickUI：轻量级前端框架

QuickUI：轻量级前端框架

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-26 08:23:09391浏览

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

插入块

> [！注意]
>确保在测试时禁用浏览器中的本地文件限制或使用实时服务器。

：小路

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

  • 结果：heading = 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>

  • 结果：heading = 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");
            }
        }
    });

计算()

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

日期（数字，格式）

  • 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 替换

  • 测试.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

> [！注意]
>如果format是对象，则直接配置多语言内容。
>如果格式是字符串，则通过 fetch 动态加载语言文件。

  • 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) 中指定的条款使用、安装和运行此软件。







©️ 2024 邱敬帏 Pardn Chiu



          

            
        
以上是QuickUI：轻量级前端框架的详细内容。更多信息请关注PHP中文网其他相关文章！
json css less html npm String Object NULL if for date format include using class Length Conditional Attribute Property Event dom this prototype href innerHTML position margin padding background transition animation input github ui
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Rust for JavaScript Developers: Your First WebAssembly Module下一篇：Can I Set the Value of an HTML File Input to a Local File Path?
相关文章
查看更多