Datastar 轻量级js框架构建简单站点到实时协作 Web 应用程序

它提供两个主要功能：

通过从后端发送事件来修改 DOM 和状态。
使用标准在前端构建反应性 data-*HTML 属性。

其他有用的资源包括 AI 生成的深度 wiki 、LLM 可提取的代码示例和单页文档。

安装＃

使用 Datastar 的最快方法是使用 script从 CDN 获取的标签。

<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script>

如果您希望自己托管文件，请下载脚本创建自己的捆绑包或使用捆绑器，然后从适当的路径包含它。

<script type="module" src="/path/to/datastar.js"></script>

data-* #

Datastar 的核心是 data-*HTML 属性（因此得名）。它们允许你为前端添加响应式功能，并以声明式的方式与后端进行交互。

Datastar VSCode 扩展和 IntelliJ 插件为所有可用的 data-* 属性。

这 data-on属性可用于将事件监听器附加到元素，并在触发事件时执行表达式。该属性的值是一个 Datastar 表达式，可以使用 JavaScript 编写。

<button data-on-click="alert('I’m sorry, Dave. I’m afraid I can’t do that.')">
    Open the pod bay doors, HAL.
</button>

演示

探讨更多数据属性我们将在指南的下一部分。

修补元素

使用 Datastar，后端 来驱动 前端。 通过修补 （添加、更新和删除）DOM 中的 HTML 元素

Datastar 从后端接收元素，并使用默认的变形策略操作 DOM。变形策略确保仅更新 DOM 中已修改的部分，从而保留状态并提高性能。

Datastar 提供了操作。向后端发送请求的 @get()动作发送 GET请求向提供的 URL 发出请求使用获取。

<button data-on-click="@get('/endpoint')">
    Open the pod bay doors, HAL.
</button>
<div id="hal"></div>

Datastar 中的操作是具有以下语法的辅助函数 @actionName(). 阅读参考资料中有关操作的更多信息。

如果响应有 content-type 的 text/html，顶级 HTML 元素将根据元素 ID 变形为现有的 DOM。

<div id="hal">
    I’m sorry, Dave. I’m afraid I can’t do that.
</div>

我们称之为“修补元素”事件，因为可以一次将多个元素修补到 DOM 中。

演示

Waiting for an order...

在上面的例子中，DOM 必须包含一个具有 halID 才能使变形功能正常工作。虽然还有其他修补策略可用，但在大多数情况下，变形是最佳且最简单的选择。

如果响应有 content-type 的 text/event-stream，它可以包含零个或多个 SSE 事件。上面的示例可以使用 datastar-patch-elements上交所事件。

event: datastar-patch-elements
data: elements <div id="hal">
data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
data: elements </div>

因为我们可以在流中发送任意数量的事件，并且因为它可以是一个长寿命连接，所以我们可以扩展上面的示例，首先发送 HAL 的响应，然后在几秒钟后重置文本。

event: datastar-patch-elements
data: elements <div id="hal">
data: elements     I’m sorry, Dave. I’m afraid I can’t do that.
data: elements </div>
event: datastar-patch-elements
data: elements <div id="hal">
data: elements     Waiting for an order...
data: elements </div>

演示

Waiting for an order...

以下是使用 SDK 生成上述 SSE 事件的代码。

import (
    "github.com/starfederation/datastar-go/datastar"
    time
)
// Creates a new `ServerSentEventGenerator` instance.
sse := datastar.NewSSE(w,r)
// Patches elements into the DOM.
sse.PatchElements(
    `<div id="hal">I’m sorry, Dave. I’m afraid I can’t do that.</div>`
)
time.Sleep(1 * time.Second)
sse.PatchElements(
    `<div id="hal">Waiting for an order...</div>`
)

除了浏览器的开发工具之外， Datastar Inspector 还可用于监控和检查 Datastar 收到的 SSE 事件。

介绍事件流和 SSE 事件更详细地我们将在本指南的后面，但正如您所见，它们只是具有特殊语法的纯文本事件，通过 SDK 变得更简单。

官网地址 https://data-star.dev/