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