QuickUI: rangka kerja bahagian hadapan yang ringan

Nama asal: PDQuickUI, ditukar kepada QuickUI daripada versi 0.6.0
QuickUI ialah rangka kerja pemaparan bahagian hadapan yang dibangunkan semata-mata dalam JavaScript. Tingkatkan prestasi pemaparan dengan menyepadukan teknologi DOM maya untuk mencapai respons data pantas dan kemas kini automatik.

Ciri teras

DOM maya yang cekap

• Kemas kini DOM yang cekap dicapai melalui algoritma perbandingan perbezaan yang tepat
• Sistem kemas kini atribut pintar, hanya kemas kini yang menukar nilai
• Mekanisme perbandingan sub-nod pintar untuk meminimumkan operasi DOM

Pemprosesan data responsif

• Sistem pemantauan data yang mendalam untuk memastikan pantulan segera perubahan data
• Kemas kini UI secara automatik apabila data berubah, tiada operasi manual diperlukan
• Sistem caching pintar mengelakkan pemaparan berulang yang tidak perlu
• Menyokong pemprosesan responsif struktur data bersarang

Ciri templat lanjutan

• Sokongan berbilang bahasa (i18n) terbina dalam untuk pengantarabangsaan yang mudah
• Menyokong pemuatan dinamik templat dan bukannya pemprosesan segerak
• Sistem ungkapan yang berkuasa menyokong pengiraan, tarikh dan pemprosesan perkataan
• Sistem arahan yang lengkap membolehkan operasi DOM yang fleksibel

Reka bentuk yang dioptimumkan prestasi

• Imej dan kandungan SVG menggunakan teknologi pemuatan malas untuk meningkatkan kelajuan pemuatan
• Saiz fail yang sangat kecil dan tiada kebergantungan luaran
• Delegasi acara pintar dan mekanisme pembersihan sumber untuk mengoptimumkan penggunaan memori

dokumen

• Tapak web: nanomd.pardn.io
• Dokumen: nanomd.pardn.io/doc.html

Kaedah pemasangan

Pasang daripada npm

npm i @pardnchiu/quickui

Diimport dari CDN

Memperkenalkan suite QuickUI

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

Versi modul

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

Cara menggunakan

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

Gambaran keseluruhan harta

teks dan kandungan

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

Pemuatan templat

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

Senarai dan lelaran

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

Penyampaian bersyarat

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

mengikat bentuk

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

Gaya dan animasi

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

Sifat dinamik

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

pengendalian acara

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

Syarat pelesenan

Projek ini menggunakan lesen seperti MIT, tetapi hanya kod yang dikelirukan disediakan:

• Sama seperti MIT: percuma untuk digunakan, diubah suai dan diedarkan semula, termasuk penggunaan komersial
• Perbezaan utama: Hanya versi kod program yang dikelirukan disediakan secara lalai dan kod sumber perlu dibeli secara berasingan
• Kandungan berlesen: notis hak cipta asal mesti dikekalkan (sama seperti MIT)

Sila rujuk perjanjian penggunaan perisian untuk terma dan syarat terperinci.

pemaju

Qiu Jingguan

• E-mel: dev@pardn.io
• Linkedin: linkedin.com/in/pardnchiu

---

©️ 2023 Pardn Chiu

Atas ialah kandungan terperinci QuickUI: rangka kerja bahagian hadapan yang ringan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!