介绍
SanoUI 是一个现代化、企业级的 UI 组件库,基于原生 JavaScript 实现,零依赖、轻量级、易扩展。
特性
🚀 零依赖
SanoUI 完全基于原生 JavaScript(ES6+)实现,不需要任何框架依赖(jQuery、Vue、React 等),可以直接在任何 HTML 项目中使用。
⚡ 高性能
- 轻量级:压缩后仅 ~200KB(gzipped)
- 快速加载:无需加载额外的框架和依赖
- 流畅体验:优化的 DOM 操作和事件处理
🎨 现代化设计
- 精美的 UI:符合现代设计规范的界面
- 主题定制:支持通过 CSS 变量轻松定制主题
- 响应式:完美适配桌面端和移动端
🔧 易于使用
html
<!-- 自动初始化,简单易用 -->
<button class="sa-button" data-button data-type="primary">
点击我
</button>
<script src="sanoui.min.js"></script>
<script>
SA.init('body'); // 一键初始化所有组件
</script>📦 模块化架构
- 按需引入:可以按需引入单个组件
- 独立组件:每个组件都是独立的,互不依赖
- 易于扩展:清晰的 API 设计,方便扩展
设计理念
1. 简单易用
通过自动初始化系统,开发者可以通过 HTML 属性快速配置组件,减少 JavaScript 代码量。
2. 灵活强大
支持自动初始化和手动创建实例两种方式,满足不同场景的需求。
3. 可扩展性
组件采用模块化设计,可以轻松扩展和定制,满足企业级应用的个性化需求。
浏览器支持
- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)
- 移动端浏览器
需要支持 ES6+ 的现代浏览器
与其他框架对比
| 特性 | SanoUI | Layui | Element UI |
|---|---|---|---|
| 依赖 | 零依赖 | jQuery | Vue |
| 体积 | ~200KB | ~200KB | ~500KB+ |
| 学习曲线 | 简单 | 简单 | 中等 |
| 组件数量 | 50+ | 30+ | 60+ |
| TypeScript | 支持(类型定义) | 不支持 | 完整支持 |
适用场景
- ✅ 企业内部系统
- ✅ 管理后台
- ✅ 数据展示平台
- ✅ 需要零依赖的项目
- ✅ 轻量级应用
- ✅ 嵌入式应用