Datastar 之道

# Datastar 之道 指南 来源：https://data-star.dev/guide/the_tao_of_datastar ← 上一页 (https://data-star.dev/guide/backend_requests)Datastar 只是一个工具。Datastar 之道，通常被称为“Datastar 方式”，是核心团队关于如何最佳使用 Datastar 构建可维护、可扩展、高性能 Web 应用的一系列观点。忽视它们后果自负！ Datastar 之道## 将状态放在正确的位置\# (https://data-star.dev/guide/the_tao_of_datastar#state-in-the-right-place) 大多数状态应存在于后端。由于前端暴露给用户，后端应作为应用状态的真相来源。 ## 从默认值开始\# (https://data-star.dev/guide/the_tao_of_datastar#start-with-the-defaults) 默认配置选项是大多数应用的推荐设置。从默认值开始，在你想修改它们之前，先停下来问自己：嗯……我是怎么走到这一步的？ (https://youtu.be/5IsSpAOD6K8) ## 修补元素和信号\# (https://data-star.dev/guide/the_tao_of_datastar#patch-elements-&-signals) 由于后端是真相来源，它应通过**修补**（添加、更新和删除）HTML 元素和信号来**驱动**前端。 ## 谨慎使用信号\# (https://data-star.dev/guide/the_tao_of_datastar#use-signals-sparingly) 过度使用信号通常意味着试图在前端管理状态。倾向于从后端获取当前状态，而不是预加载并假设前端状态是最新的。一个很好的经验法则是：*仅*将信号用于用户交互（例如切换元素可见性）以及向后端发送新状态（例如将信号绑定到表单输入元素）。 ## 信赖 Morph\# (https://data-star.dev/guide/the_tao_of_datastar#in-morph-we-trust) Morphing 确保只更新 DOM 中已修改的部分，从而保持状态并提升性能。这允许你向下发送大块 DOM 树（一直到`html`标签），有时称为“fat morph”，而不是自己管理细粒度更新。如果你想显式忽略某个元素的 morphing，可以在其上放置`data-ignore-morph` (https://data-star.dev/reference/attributes#data-ignore-morph)属性。 ## SSE 响应\# (https://data-star.dev/guide/the_tao_of_datastar#sse-responses) SSE (https://html.spec.whatwg.org/multipage/server-sent-events.html)响应允许你发送`0`到`n`个事件，在其中你可以修补元素 (https://data-star.dev/guide/getting_started/#patching-elements)、修补信号 (https://data-star.dev/guide/reactive_signals#patching-signals) 以及执行脚本 (https://data-star.dev/guide/datastar_expressions#executing-scripts)。由于事件流只是经过一些特殊格式化的 HTTP 响应，而且 SDK (https://data-star.dev/reference/sdks) 可以为你处理，因此使用除 `text/event-stream` (https://data-star.dev/reference/actions#response-handling) 之外的内容类型并没有实际好处。 ## 压缩\# (https://data-star.dev/guide/the_tao_of_datastar#compression) 由于 SSE 响应从后端流式传输事件，并且 morphing 允许发送大块 DOM，压缩响应是自然而然的选择。使用 Brotli 压缩流时，200:1 的压缩比并不罕见。在本文 (https://andersmurphy.com/2025/04/15/why-you-should-use-brotli-sse.html) 中了解更多关于压缩流的内容。 ## 后端模板\# (https://data-star.dev/guide/the_tao_of_datastar#backend-templating) 由于你的后端生成 HTML，你可以也应该使用模板语言来保持 DRY (https://data-star.dev/how_tos/keep_datastar_code_dry)（不要重复自己）。 ## 页面导航\# (https://data-star.dev/guide/the_tao_of_datastar#page-navigation) 页面导航 30 年来没有改变过。使用锚元素 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a)（``）导航到新页面，或者如果从后端重定向，则使用重定向 (https://data-star.dev/how_tos/redirect_the_page_from_the_backend)。对于平滑页面过渡，请使用视图过渡 API (https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)。 ## 浏览器历史\# (https://data-star.dev/guide/the_tao_of_datastar#browser-history) 浏览器会自动保留访问页面的历史记录。一旦你开始自己管理浏览器历史，你就增加了复杂性。每个页面都是一个资源。使用锚标签，让浏览器做它擅长的事。 ## CQRS\# (https://data-star.dev/guide/the_tao_of_datastar#cqrs) CQRS (https://martinfowler.com/bliki/CQRS.html) 将命令（写入）和请求（读取）分离，使得可以有一个长期存在的请求从后端接收更新（读取），同时向后端发出多个短期请求（写入）。这是一个强大的模式，使用 Datastar 可以轻松实现实时协作。以下是一个基本示例。 `` 1 2 3 执行操作 4 5 `` ## 加载指示器\# (https://data-star.dev/guide/the_tao_of_datastar#loading-indicators) 加载指示器通知用户某个操作正在进行中。使用 `data-indicator` (https://data-star.dev/reference/attributes#data-indicator) 属性在触发后端请求的元素上显示加载指示器。这是一个按钮示例，它在等待后端响应时显示加载元素。 `` 1 2 5 执行操作 6 加载中... 7 8 `` 使用 CQRS (https://data-star.dev/guide/the_tao_of_datastar#cqrs) 时，通常更好的做法是在发出后端请求时手动显示加载指示器，并在 DOM 从后端更新时允许其隐藏。以下是一个示例。 `` 1 2 3 执行操作 4 加载中... 5 6 `` ## 乐观更新\# (https://data-star.dev/guide/the_tao_of_datastar#optimistic-updates) 乐观更新（也称为乐观 UI）是指 UI 在操作成功之前立即更新，就好像操作已成功一样，然后等待后端确认。这是一种用于让 Web 应用感觉更快的策略，但实际上它是在欺骗用户。想象一下看到一个操作成功的确认消息，下一秒却显示它实际上失败了。与其欺骗用户，不如使用加载指示器 (https://data-star.dev/guide/the_tao_of_datastar#loading-indicators) 向用户显示操作正在进行中，并且仅在后端确认成功（参见此示例 (https://data-star.dev/examples/rocket_flow)）。 ## 无障碍性\# (https://data-star.dev/guide/the_tao_of_datastar#accessibility) Web 应对所有人无障碍。Datastar 不会妨碍你，并将无障碍性 (https://developer.mozilla.org/en-US/docs/Web/Accessibility) 留给你。使用语义化 HTML，在合理的地方应用 ARIA，并确保你的应用在键盘和屏幕阅读器上运行良好。以下是一个使用 `data-attr` (https://data-star.dev/reference/attributes#data-attr) 在切换菜单可见性的按钮上应用 ARIA 属性的示例。 `` 1 4 打开/关闭菜单 5 6 `` ← 上一页 (https://data-star.dev/guide/backend_requests)