QuickUI: lightweight front-end framework

Original name: PDQuickUI, changed to QuickUI from version 0.6.0
QuickUI is a front-end rendering framework developed purely in JavaScript. Improve rendering performance by integrating virtual DOM technology to achieve fast data response and automatic updates.

Core features

Efficient virtual DOM

• Efficient DOM updates are achieved through accurate difference comparison algorithm
• Smart attribute update system, only updates changed values
• Intelligent sub-node comparison mechanism to minimize DOM operations

Responsive data processing

• In-depth data monitoring system to ensure immediate reflection of data changes
• Automatically update the UI when data changes, no manual operation required
• Smart caching system avoids unnecessary repeated rendering
• Supports responsive processing of nested data structures

Advanced template features

• Built-in multi-language (i18n) support for easy internationalization
• Supports dynamic loading of templates instead of synchronous processing
• Powerful expression system supports calculation, date and word processing
• Complete command system enables flexible DOM operations

Performance optimized design

• Images and SVG content use lazy loading technology to improve loading speed
• Very small file size and no external dependencies
• Intelligent event delegation and resource cleaning mechanism to optimize memory usage

document

• Website: nanomd.pardn.io
• Document: nanomd.pardn.io/doc.html

Installation method

Install from npm

npm i @pardnchiu/quickui

Imported from CDN

Introducing the QuickUI suite

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

Module version

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

How to use

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

Property overview

text and content

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

Template loading

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

Lists and iterations

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

Conditional rendering

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

form binding

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

Styles and animations

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

Dynamic properties

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

event handling

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

Licensing terms

This project adopts MIT-like license, but only obfuscated code is provided:

• Same as MIT: free to use, modify, and redistribute, including commercial use
• Main difference: Only the obfuscated version of the program code is provided by default, and the source code needs to be purchased separately
• Licensed content: original copyright notice must be retained (same as MIT)

Please refer to the software usage agreement for detailed terms and conditions.

Developer

Qiu Jingguan

• Email: dev@pardn.io
• Linkedin: linkedin.com/in/pardnchiu

---

©️ 2023 Pardn Chiu

The above is the detailed content of QuickUI: lightweight front-end framework. For more information, please follow other related articles on the PHP Chinese website!