我终于发布了我的产品!!
发布: (2025年12月16日 GMT+8 23:05)
3 min read
原文: Dev.to
Source: Dev.to
Cardboard.js is now on Product Hunt
大家好，
在多年开发 Cardboard.js 之后，我终于在 Product Hunt 上发布了它。这个项目最初的目标是构建小型、交互式的网页应用——不需要编写 HTML、JSX 或单独的 CSS 文件——你只需使用普通的 JavaScript 或 TypeScript，剩下的交给 Cardboard 来处理渲染和响应式。
如果你已经关注了我之前关于构建这个框架的帖子，感谢一路相伴。如果还没有，这里有一个快速介绍以及几个代码片段，帮助你感受一下使用它的体验。
Cardboard.js 是什么
Cardboard.js 是一个 轻量级的响应式 UI 库（约 16 KB），专注于简洁和性能。它提供：
- 无需 HTML —— 通过 JS 生成 DOM 元素。
- 内置状态管理。
- 响应式更新（状态变化时 UI 自动更新）。
- 可复用组件 与 CSS‑in‑JS 样式支持。
快速代码示例
基本用法
不写 HTML，直接在 JavaScript 中初始化框架并定义 UI：
import { tag, init, allTags } from '@nkeff/cardboard-js';
const { div, p } = allTags;
// 初始化 Cardboard（默认根节点为 <body>）
const root = init();
// 添加元素
root.append(
div(
p('Hello world!')
)
);简单的响应式计数器
Cardboard 包含响应式状态原语，UI 会自动更新：
const Counter = () => {
const count = state(0);
return button()
.text(`Clicked $count times`, { count })
.addStyle('color', 'gray')
.stylesIf(count.greaterThan(5), { color: 'red' })
.clicked(() => count.value++);
};
// 挂载到 body
tag('(body)').append(Counter());为什么它很重要
如果你曾使用过需要处理模板、构建步骤以及大量样板代码的框架，Cardboard 提供了一个 更简洁的替代方案——逻辑和 UI 可以一起写在普通的 JavaScript 或 TypeScript 中。它体积小、速度快，并且如果你不想使用 HTML、CSS 或 JSX，也完全可以不使用。
你可以如何帮助
如果你觉得它可能有用——或者仅仅觉得有趣——欢迎在 Product Hunt 上给予支持。一次访问、投票或评论都能带来很大帮助，让这个项目获得更多曝光。
感谢阅读——如果你尝试了它，真的很想听听你用它构建了什么。