核心特色
高效虚拟 dom
透过精准的差异比对算法实现高效 dom 更新 智慧属性更新系统，只更新发生变化的值 智能子节点对比机制，最小化 dom 操作响应式数据处理
深度数据监控系统，确保数据变更即时反映 数据变更时自动更新 ui，无需手动操作 智慧缓存系统避免不必要的重复渲染 支援巢状数据结构的响应式处理进阶模板功能
内建多语系（i18n）支援，轻松实现国际化 支援动态载入模板并非同步处理 强大的表达式系统，支援计算、日期和文字处理 完整的指令系统实现灵活的 dom 操作效能优化设计
图片和 svg 内容采用懒加载技术，提升载入速度 极小的档案体积且无外部依赖 智慧事件委派和资源清理机制，优化记忆体使用文档
网站: nanomd.pardn.io 说明文件: nanomd.pardn.io/doc.html安装方式
从 npm 安装
1
npm i @pardnchiu/quickui
从 cdn 引入
引入 quickui 套件1
2
3
4
5
<!-- 0.6.0 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[version]/dist/quickui.js"></script>
<!-- 0.5.4 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdquickui@[version]/dist/pdquickui.js"></script>
1
2
3
4
5
// 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";
使用方法
初始化 qui
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 () {
// 已銷毀
}
}
});
属性概览
文字与内容{{ username }}
顯示使用者名稱 :html 原始 html 插入 渲染格式化內容授权条款
本专案采用类 mit 授权，但仅提供混淆后的程式码：
与 mit 相同：可自由使用、修改、再散布，包含商业用途 主要差异：预设仅提供混淆版程式码，原始码需另外购买 授权内容：必须保留原始版权声明 (与 mit 相同)详细条款与条件请参阅软体使用协议。
开发者
邱敬帏
email: dev@pardn.io linkedin: linkedin.com/in/pardnchiu©️ 2023 邱敬帏 pardn chiu
以上就是QuickUI: 轻量化前端框架的详细内容，更多请关注php中文网其它相关文章！