| 方式 | 代码 | 适用场景 |
|---|---|---|
| IIFE | <script src="https://cxfjh.cn/js/rd/0.1.0.js"></script> |
无构建工具 |
| Module | <script type="module" src="https://cxfjh.cn/js/rd/es.0.1.0.js"></script> |
模块化项目 |
| Module | import RealDom from "./es.0.1.0.js"; |
模块化项目 |
<div r-data="{title: '我的待办事项', input: '',list: [{ text: '学习 RealDom', done: false }]}">
<h2>{{ title }}</h2>
<div>
<input type="text" r-model="input" placeholder="输入待办..." />
<button r-click="list.push({text: input, done: false})">添加</button>
</div>
<div r-for="list">
<span r-click="list[index].done = !list[index].done">{{ value.done ? '✓' : '○' }} {{ value.text }}</span>
<span r-click="list.splice(index, 1)">×</span>
</div>
<p>总数: {{ list.length }} | 已完成: {{ list.filter(v => v.done).length }}</p>
</div>| 特性 | 说明 |
|---|---|
| 轻量级 | 压缩后仅 11KB，零外部依赖 |
| 高性能 | 基于 Proxy 的深度响应式 + requestAnimationFrame 批量异步更新 |
| 组件化 | 模板、样式、逻辑三者分离，支持 Scoped CSS |
| 指令系统 | 内置 8 个核心指令 + 可扩展的自定义指令 |
| 路由管理 | 内置 SPA 路由，支持懒渲染、多容器、激活样式 |
| 零配置 | 无需构建工具，<script> 标签引入即用 |
我们欢迎任何形式的贡献！推荐使用 Conventional Commits 规范
本项目基于 MIT License 开源，允许个人和商业项目自由使用、修改和分发。
