# jswift **Repository Path**: codelint/jswift ## Basic Information - **Project Name**: jswift - **Description**: JSwift - 纯 JavaScript 声明式 UI 框架，受 SwiftUI 启发，零 HTML/CSS 要求，响应式状态管理，链式调用 API，TypeScript 支持。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-17 - **Last Updated**: 2026-02-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # JSwift - 纯 JavaScript 声明式 UI 框架

![Version](https://img.shields.io/badge/version-0.1.0-blue.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg) ![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg) **一个受 SwiftUI 启发的声明式 UI 框架，使用纯 JavaScript 实现** [快速开始](#快速开始) • [示例](#示例) • [API 文档](./docs/API.md) • [贡献指南](#贡献)

--- ## ✨ 特性 - 🎯 **零 HTML/CSS 要求** - 只需掌握 JavaScript 即可构建 UI - 🔄 **响应式状态管理** - 自动追踪依赖并更新 UI - 🎨 **链式调用 API** - 类似 SwiftUI 的流畅开发体验 - ⚡ **原生性能** - 直接操作 DOM，无虚拟 DOM 开销 - 📦 **TypeScript 支持** - 完善的类型推导和智能提示 - 🌊 **渐进式采用** - 可局部使用，也可全站使用 - 🎁 **零依赖** - 轻量级，gzip 后仅 ~15KB - 🔧 **双模块格式** - 支持 ES Module 和 CommonJS ## 📦 安装 ### NPM ```bash npm install jswift ``` ### CDN ```html ``` ### 打包文件 JSwift 提供多种打包格式供不同场景使用： | 文件 | 格式 | 大小 | 用途 | |------|------|------|------| | `jswift.umd.js` | UMD | ~23KB | 传统 ` ``` ### 使用构建工具 ```javascript import { VStack, Text, Button, State } from 'jswift'; const count = new State(0); const app = new VStack({ spacing: 20, alignment: 'center', children: [ new Text('计数器').fontSize(32), new Text(`当前值: ${count.value}`), new Button({ title: '增加', onPress: () => count.value++ }) ] }); app.renderTo('#app'); ``` ## 📖 核心概念 ### 1. View - 视图基类所有 UI 组件都继承自 `View`，支持链式调用： ```javascript new Text('Hello World') .fontSize(24) .color('red') .padding(10) .onClick(() => console.log('clicked')); ``` ### 2. State - 响应式状态 ```javascript const count = new State(0); count.subscribe(() => { console.log('状态已更新:', count.value); }); count.value++; // 自动触发更新 ``` ### 3. 布局组件 ```javascript new VStack({ spacing: 10, alignment: 'center' }) .addChild(new Text('垂直布局')); new HStack({ spacing: 10, alignment: 'center' }) .addChild(new Text('水平布局')); new ZStack({ alignment: 'center' }) .addChild(new Text('层叠布局')); ``` ## 🎨 示例 ### 计数器 [查看完整示例](./examples/counter.html) ```javascript import { VStack, HStack, Text, Button, State } from 'jswift'; const count = new State(0); const counterText = new Text(`计数: ${count.value}`) .fontSize(32) .fontWeight('bold'); count.subscribe(() => { counterText.setText(`计数: ${count.value}`); }); const app = new VStack({ spacing: 30, alignment: 'center', children: [ new Text('计数器').fontSize(24), counterText, new HStack({ spacing: 20, children: [ new Button({ title: '减少', onPress: () => count.value-- }), new Button({ title: '增加', onPress: () => count.value++ }) ] }) ] }); app.renderTo('#app'); ``` ### 待办事项 [查看完整示例](./examples/todo.html) ```javascript import { VStack, HStack, Text, Button, Input, State } from 'jswift'; const todos = new State([]); const inputValue = new State(''); function addTodo() { if (inputValue.value.trim()) { todos.value = [ ...todos.value, { id: Date.now(), text: inputValue.value.trim(), completed: false } ]; inputValue.value = ''; } } // 渲染待办列表... ``` ### 表单验证 [查看完整示例](./examples/form.html) ```javascript import { VStack, Text, Input, Button, State } from 'jswift'; const username = new State(''); const password = new State(''); const errors = new State({}); function validateForm() { const newErrors = {}; if (!username.value) newErrors.username = '用户名不能为空'; if (!password.value) newErrors.password = '密码不能为空'; errors.value = newErrors; return Object.keys(newErrors).length === 0; } // 渲染表单... ``` ### 商品卡片 [查看完整示例](./examples/cards.html) ```javascript import { VStack, HStack, Text, Button, State } from 'jswift'; const products = [ { id: 1, name: 'MacBook Pro', price: 12999 }, { id: 2, name: 'iPhone 15', price: 7999 }, // ... ]; const cart = new State([]); function addToCart(product) { cart.value = [...cart.value, product]; } // 渲染商品列表... ``` ## 📚 API 文档详细的 API 文档请查看 [API.md](./docs/API.md) ### 基础组件 - `Text` - 文本组件 - `Button` - 按钮组件 - `Input` - 输入框组件 - `Image` - 图片组件 - `Link` - 链接组件 - `Divider` - 分隔线组件 - `Checkbox` - 复选框组件 - `RadioGroup` - 单选框组组件 - `Select` - 下拉选择组件 - `Textarea` - 多行文本组件 - `Switch` - 开关组件 - `Slider` - 滑块组件 ### 布局组件 - `VStack` - 垂直堆叠布局 - `HStack` - 水平堆叠布局 - `ZStack` - 层叠布局 ### 状态管理 - `State` - 响应式状态 - `Computed` - 计算属性 ### 样式方法所有组件都支持以下样式方法： - `width(value)` - 宽度 - `height(value)` - 高度 - `padding(value)` - 内边距 - `margin(value)` - 外边距 - `backgroundColor(color)` - 背景色 - `background(value)` - 背景（支持渐变等） - `color(color)` - 文字颜色 - `fontSize(size)` - 字体大小 - `fontWeight(weight)` - 字体粗细 - `borderRadius(value)` - 圆角 - `border(value)` - 边框 - `opacity(value)` - 透明度 - `cursor(value)` - 鼠标样式 - `boxShadow(value)` - 阴影 - `transition(value)` - 过渡动画 - `css(property, value)` - 设置任意 CSS 属性 ### 事件方法 - `onClick(handler)` - 点击事件 - `on(event, handler)` - 绑定事件 - `off(event)` - 解绑事件 ### 实例方法 - `id(value)` - 设置组件 ID - `getId()` - 获取组件 ID - `getElement()` - 获取 DOM 元素 - `isMounted()` - 是否已挂载 - `remove()` - 移除组件 ## 🛠️ 开发 ### 安装依赖 ```bash npm install ``` ### 构建 ```bash npm run build ``` ### 测试 ```bash npm test ``` ### 测试覆盖率 ```bash npm run test:coverage ``` ## 📁 项目结构 ``` jswift/ ├── src/ │ ├── core/ # 核心模块 │ │ ├── View.ts # 视图基类 │ │ ├── style.ts # 样式工具 │ │ └── types.ts # 类型定义 │ ├── state/ # 状态管理 │ │ ├── State.ts # 响应式状态 │ │ ├── Computed.ts # 计算属性 │ │ └── reactive.ts # 响应式系统 │ ├── renderer/ # 渲染引擎 │ │ ├── renderer.ts # DOM 渲染器 │ │ └── scheduler.ts # 更新调度器 │ ├── components/ # UI 组件 │ │ ├── layout/ # 布局组件 │ │ └── basic/ # 基础组件 │ ├── events/ # 事件系统 │ └── __tests__/ # 单元测试 ├── examples/ # 示例项目 ├── docs/ # 文档 └── dist/ # 构建产物 ├── esm/ # ES Module 版本 (模块化) ├── cjs/ # CommonJS 版本 (模块化) ├── types/ # TypeScript 类型定义 ├── jswift.umd.js # UMD 打包文件 ├── jswift.umd.min.js # UMD 压缩版 ├── jswift.esm.js # ESM 打包文件 └── jswift.esm.min.js # ESM 压缩版 ``` ## 🤝 贡献欢迎贡献代码！请查看 [贡献指南](CONTRIBUTING.md) ## 📄 许可证 [MIT](LICENSE) ## 🙏 致谢灵感来源于 Apple 的 SwiftUI 框架。 ---

**[⬆ 返回顶部](#jswift---纯-javascript-声明式-ui-框架)** Made with ❤️ by JSwift Team