SuperAPI AI 工具集

jaspr-fundamentals

前端与建站

查看项目

更新于 10-16 02:31

技能介绍

用途:该技能面向在 Jaspr 项目中编写组件或处理 Jaspr 相关任务,提供组件编写与 HTML 使用的基础知识。

主要能力:Jaspr 采用类似 Flutter widget 的组件架构。StatelessComponent 用于无可变状态组件,需重写 Component build(BuildContext context);StatefulComponent 用于有状态组件,需配套 State 类并实现 initState()、dispose() 等生命周期;InheritedComponent 用于沿组件树高效传递上下文或状态。build() 必须返回单个 Component,禁止使用 Iterable<Component> build(...) 旧写法;片段、文本、空节点须用点简写 .fragment([...])、.text('...')、.empty()。

HTML 组件:需导入 package:jaspr/dom.dart,提供 div()、p()、a()、button() 等类型化组件,支持 key、id、classes、style、attributes、events 等命名参数,多数组件接受位置参数 List<Component> children(自闭合标签除外)。children 列表须放在所有命名参数之后,优先使用类型化参数(如 href、src、onClick)而非原始 attributes/events 映射;不确定签名时查阅 references/html/<tag>.md,无对应文件则用 .element(tag: '...', children: [...])。

交互与事件:服务端或静态模式下访问浏览器 API 须用 package:universal_web/web.dart 与 js_interop.dart,并用 if (kIsWeb) 包裹以防服务端渲染崩溃;客户端模式可直接用 dart:js_interop 与 package:web。全局事件用 web.EventStreamProviders 监听 window/document。原始事件类型用 web.Event,必要时用 events() 辅助函数。需要直接引用 DOM 元素时可使用 GlobalNodeKey。

限制与延伸:样式使用 CSS-in-Dart,详见 jaspr-styling;预渲染、异步数据获取、水合与 @client 注解详见 jaspr-pre-rendering-and-hydration;HTML 转 Jaspr 代码详见 jaspr-convert-html。完整文档索引见 https://jaspr.site/llms.txt。