原名：pdquickui，自 0.6.0 版本起更名为 quickui quickui 是一个纯 JavaScript 开发的前端渲染框架。通过整合虚拟 dom 技术提升渲染效能，实现快速的数据响应和自动更新。
核心特色
高效虚拟 dom
- 透过精准的差异比对算法实现高效 dom 更新
- 智慧属性更新系统，只更新发生变化的值
- 智能子节点对比机制，最小化 dom 操作
响应式数据处理
- 深度数据监控系统，确保数据变更即时反映
- 数据变更时自动更新 ui，无需手动操作
- 智慧缓存系统避免不必要的重复渲染
- 支援巢状数据结构的响应式处理
进阶模板功能
- 内建多语系（i18n）支援，轻松实现国际化
- 支援动态载入模板并非同步处理
- 强大的表达式系统，支援计算、日期和文字处理
- 完整的指令系统实现灵活的 dom 操作
效能优化设计
- 图片和 svg 内容采用懒加载技术，提升载入速度
- 极小的档案体积且无外部依赖
- 智慧事件委派和资源清理机制，优化记忆体使用
文档
安装方式
从 npm 安装
npm i @pardnchiu/quickui
从 cdn 引入
引入 quickui 套件
<!-- 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>
module 版本
// 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
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 () { // 已銷毀 } } });
属性概览
文字与内容
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| {{ value }} | 動態文字內容 |
{{ username }} 顯示使用者名稱 |
| :html | 原始 html 插入 |
渲染格式化內容 |
模板载入
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| :path | 外部模板載入 | |
列表与迭代
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| :for | 陣列/物件迭代 |
渲染列表項目 |
条件渲染
表单绑定
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| :model | 雙向資料綁定 | 與資料同步 |
样式与动画
动态属性
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| :[attr] | 動態屬性 | @@##@@ |
事件处理
| 屬性 | 使用場景 | 範例 |
|---|---|---|
| @[event] | 事件監聽器 |
授权条款
本专案采用类 mit 授权，但仅提供混淆后的程式码：
- 与 mit 相同：可自由使用、修改、再散布，包含商业用途
- 主要差异：预设仅提供混淆版程式码，原始码需另外购买
- 授权内容：必须保留原始版权声明 (与 mit 相同)
详细条款与条件请参阅软体使用协议。
开发者
邱敬帏
- email: dev@pardn.io
- linkedin: linkedin.com/in/pardnchiu
©️ 2023 邱敬帏 pardn chiu
