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
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
{{ value }} | 動(dòng)態(tài)文字內(nèi)容 |
{{ userName }} 顯示使用者名稱 |
:html | 原始 HTML 插入 | 渲染格式化內(nèi)容 |
Pemuatan templat
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:path | 外部模板載入 |
|
Senarai dan lelaran
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:for | 陣列/物件迭代 |
|
Penyampaian bersyarat
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:if | 條件顯示 | 歡迎! |
:else-if/:elif | 次要條件 | 載入中... |
:else | 預(yù)設(shè)內(nèi)容 | 請(qǐng)登入 |
mengikat bentuk
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:model | 雙向資料綁定 | 與資料同步 |
Gaya dan animasi
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:animation | 過渡效果 | 內(nèi)容 |
:[css] | 動(dòng)態(tài)樣式 | 樣式內(nèi)容 |
Sifat dinamik
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
:[attr] | 動(dòng)態(tài)屬性 | ![]() |
pengendalian acara
屬性 | 使用場景 | 範(fàn)例 |
---|---|---|
@[event] | 事件監(jiān)聽器 |
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!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection

Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.

JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
