QuickUI: rangka kerja bahagian hadapan yang ringan-tutorial js-php.cn

QuickUI: rangka kerja bahagian hadapan yang ringan

DDD

Lepaskan： 2024-12-27 19:35:10

asal

220 orang telah melayarinya

QuickUI: 輕量化前端框架

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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