talkDOM：一个用于 DOM 的小型消息传递运行时
Source: Dev.to
请提供您希望翻译的完整文本内容，我将按照要求将其译成简体中文并保留原有的格式、Markdown 语法以及技术术语。谢谢！
现代前端开发
现代前端开发通常认为构建交互式网页界面需要使用庞大的 JavaScript 框架。多年来，框架变得日益复杂，引入了组件、状态管理系统、构建流水线以及庞大的运行时包。
talkDOM 表明 Web 已经拥有一个强大的平台：HTML + the DOM + HTTP。
仓库：
核心理念
在 talkDOM 中，元素使用 Smalltalk 风格的消息 进行通信。
一个 发送者 元素包含一个 sender 属性：
<button sender="posts get:/posts | list apply:inner">
Load Posts
</button>一个 接收者 元素声明它可以接收的内容：
<div receiver="list"></div>当按钮被点击时：
- 向
posts发送一条消息。 - 执行一次
GET /posts请求。 - 将响应通过管道传递给
list。 - 替换列表的内容。
消息字符串
posts get:/posts | list apply:inner几乎像一句话：
“Posts，获取
/posts，然后 list 将结果作为内部内容应用。”
消息管道
Multiple operations can be composed with the pipe operator |:
<button sender="posts get:/posts | list apply:inner">
Load Posts
</button>Each step may return a value (or a promise) that is passed to the next step.
The design is inspired by:
- Unix 管道
- Smalltalk 关键字消息
- 通用的消息传递系统
Pipelines let you express complex UI behavior with surprisingly little code.
接收器
接收器 是指任何带有 receiver 属性的 DOM 元素：
<div receiver="toast"></div>多组
<div receiver="toast" group="info"></div>
<div receiver="toast" group="error"></div>发送到 toast 的消息将针对 所有 匹配的元素。
接受的操作
<div receiver="list" accepts="inner,append"></div>accepts 列表通过限制接收器可以执行的操作，提供了一层小的安全防护。
Source:
获取和更新内容
talkDOM 提供了用于 HTTP 请求和 DOM 更新的内置方法。
<button sender="load get:/data | target apply:inner">
Load
</button>支持的请求方法
get:post:put:delete:
更新操作
inner– 替换innerHTMLappend– 追加到已有内容text– 替换textContentouter– 替换整个元素
服务器触发的操作
服务器可以通过响应头 X‑TalkDOM‑Trigger 触发客户端操作。
示例头部：
X-TalkDOM-Trigger: toast apply:"Saved!" text服务器可以指示客户端在不嵌入任何 JavaScript 的情况下更新 UI 元素。
轮询
接收器可以自动轮询一个端点：
<div receiver="posts" poll="/posts" interval="5000"></div>这会每 5 秒 获取一次 /posts 并更新接收器。如果该元素从 DOM 中移除，轮询会自动停止。
导航和历史
talkDOM 支持具备历史感知的导航：
<a href="/posts" sender="posts get:/posts | list apply:inner" history>
Posts
</a>点击时：
- 请求被执行。
- 内容被更新。
- URL 被推送到浏览器历史记录中。
后退/前进导航会重新播放相同的消息链。
持久化
接收器可以将其内容持久化到 localStorage 中：
<div receiver="profile" persist-key="profile-data"></div>页面重新加载后，内容会自动恢复。
事件
talkDOM 在操作后会触发生命周期事件：
talkdom:done– 操作成功talkdom:error– 操作失败
document.addEventListener("talkdom:done", e => {
console.log("operation finished", e.detail);
});这些事件使得在需要时能够轻松挂钩到运行时。
为什么要构建它？
像 HTMX、Unpoly 和 Turbo 这样的项目已经展示了许多交互式界面可以在不使用大型前端框架的情况下构建。talkDOM 探索了稍微不同的方向。
而不是使用类似属性的 API，例如：
hx-get="/posts"
hx-target="#list"
hx-swap="inner"talkDOM 使用 消息语法：
posts get:/posts apply:inner这使得交互：
- 可组合
- 管道友好
- 更接近编程语言
HTML 成为用于 UI 行为的一个小型 DSL。
设计目标
talkDOM 的构建考虑了以下几个目标：
- 极小的运行时（仅几千字节）
- 无需构建步骤——直接引入脚本即可使用
- 渐进增强——在任何现代浏览器上均可工作
- 可组合的交互 通过管道实现
- 最少的 JavaScript——大部分逻辑写在 HTML 中
整个运行时仅是一个轻量级脚本，可添加到任何页面。
这是什么（以及不是）
talkDOM 并不是要取代完整的 UI 框架。
它最适用于：
- 服务器渲染的应用程序
- 仪表盘
- 管理面板
- 渐进增强的页面
其中 服务器仍然是主要的真相来源。
结束语
- 文档
- 事件
- HTTP
- DOM
有时，最好的工具不是另一层抽象，而是 一个让平台自行表达的轻量运行时。
talkDOM 是朝这个方向的实验：将 HTML 转化为一种用于构建交互式界面的微型消息传递语言。
该项目可在 GitHub 上获取：