厌倦了React、Vue等框架的层层封装？ 受够了虚拟DOM、构建流程、npm依赖？ 今天给大家介绍一款反套路前端框架——Qite.js，主打DOM优先、零构建、纯HTML原生，让前端回归简单本质。

一、Qite.js到底是什么？

Qite.js是为讨厌复杂框架、热爱原生HTML的开发者打造的前端组件框架。

核心定位：

• DOM-first，以真实DOM为唯一真相源
• SSR-first，服务端渲染友好
• 零构建、无虚拟DOM、不混写HTML与JS
• 轻量自给，足以支撑正式项目

二、为什么要选Qite.js？

现代框架把简单事情复杂化： 虚拟DOM、渲染周期、水合、编译、自定义语法、庞大依赖…… 写个按钮都要经过转译、打包、组件重执行等多层冗余操作。

Qite.js反其道而行： 

✅ 零构建步骤 直接浏览器运行，引入script即可用，无需npm、打包器、转译器。

✅ 无虚拟DOM 直接操作真实DOM，无diff对比、无重新渲染，更新即时高效。

✅ 分离彻底 HTML=结构，JS=行为，CSS=样式，不混写，无JSX，纯原生语法。

✅ SSR优先 服务端输出HTML，客户端挂载行为，可全SSR、局部SPA、完整SPA自由切换。

✅ 声明式状态 用规则替代零散if/else，状态变化自动更新UI，告别混乱的class切换。

✅ 清晰事件通信 一套API兼容DOM事件与组件事件，父子分层通信，无全局总线、无隐藏副作用。

三、核心特性速览

1. DOM即真相源

组件直接绑定真实DOM元素：

<div data-component="Counter"></div>

无内存模拟，浏览器原生处理DOM，性能更稳。

2. 内置双状态体系

• fields：结构化数据（状态、价格、邮箱等），同步DOM
• flags：开关状态（加载中、展开、锁定等），控制行为与显示。

3. 声明式显示规则

状态变化自动匹配UI，代码更整洁：

static display_states = [  [{ flags: ["loading"] }, "#spinner"],  [{ status: "error" }, "#error"],  [{ status: "ready" }, ".content"]];

4. 原生template动态组件

用HTML <template> 动态创建组件，标记与行为彻底分离，体验一致。

四、Qite.js是与不是

✅ Qite.js是

• DOM优先组件框架
• 声明式状态系统
• 分层事件系统
• SSR友好层
• 零构建方案

❌ Qite.js不是

• 虚拟DOM框架
• 模板编译器
• React克隆
• 强制SPA架构
• 依赖npm/bundler的框架

五、适合谁用？

• 追求极简、原生、可维护的前端开发者
• SSR项目、内容站、后台系统、轻交互应用
• 不想被复杂工具链绑架的团队/个人
• 希望HTML、JS、CSS严格分离的项目

六、上手超简单

1. 引入核心脚本

<script src="/qite/src/qiteinit.js"></script><script src="/js/init.js" type="module"></script>

2. 写HTML结构
3. 用JS继承BaseComponent写行为
4. 注册组件，直接运行

前端不必臃肿，回归HTML与浏览器本身，Qite.js给你干净、高效、可控的开发体验。

阅读原文：点击这里​