背景

在 Web 里，一个新特性到底值不值得学，往往不在于它有多“前沿”，而在于一句更现实的话：现在能不能用？

这次我想聊的，是一个挺有意思的变化：浏览器正在把一部分交互能力，慢慢从 JavaScript 手里“收回来”，让 HTML 自己就能完成一些原本必须写事件监听的事。

这些变化主要源自一个叫 Invoker Commands 的 API。

如果你最近关注过 popover、dialog 这类原生交互组件，那你会发现它不是“又多了一个 API”，而更像是：浏览器在补一块早就该补上的基础设施。

这类能力真正开始被更多人关注，是因为近一两年里，主流浏览器陆续开始实现这套机制，并逐渐进入可实际使用的范围。

它想解决的问题，其实可以用一句非常直白的话说清楚：

让 HTML 自己承担一部分基础交互，而不是所有事情都必须从 JavaScript 开始。

在过去很多年里，按钮本质上只是一个“事件触发器”。点一下按钮，真正干活的是后面那一段 JavaScript。

而 Invoker Commands 做的事情是：让按钮可以直接声明我要控制谁，要做什么。

也就是说，一部分非常标准、非常通用的交互，不再需要每个项目都手写一遍事件绑定逻辑。

核心机制

接下来我们来聊一下 Invoker Commands API 的核心机制：commandfor 和 command。

Invoker Commands 给像 <button> 这样的元素增加了两个很关键的能力：

• 一个是用来指定目标对象的

• 一个是用来指定要执行什么操作的

也就是上面你看到的这两个属性：

• commandfor：告诉浏览器，这个按钮是要控制哪个元素（通过 id 关联）

• command：告诉浏览器，点击之后要执行什么行为

有了这套机制之后，按钮就不再只是“点一下 → 触发 JS 事件”，而是可以直接表达：

我点击之后，要对某个元素执行某个动作。

这种写法本质上是一种声明式交互模型。这意味着先把“意图”写在 HTML 里，而不是等 JavaScript 再去拼装行为。对于很多标准化程度很高的交互来说，这一步其实能省掉非常多重复代码。

具体示例

拿 popover（弹出层）举个最直观的例子。

以前如果你想做一个最简单的弹出层，基本流程一定是：

1. 选元素

2. 写点击事件

3. 控制显示隐藏

4. 处理关闭逻辑

而现在，在支持这套能力的浏览器里，很多最基础的控制可以直接写在 HTML 里完成，比如这样：

<button commandfor="mypopover" command="toggle-popover">  切换弹出层</button>
<div id="mypopover" popover>  <button commandfor="mypopover" command="hide-popover">    关闭  </button>  弹出层内容</div>

这里其实就做了两件非常简单的事情：

• 第一个按钮通过 commandfor="mypopover" 指定了目标元素

• 再通过 command="toggle-popover" 告诉浏览器，点击时切换这个 popover 的显示状态。

而弹出层内部这个关闭按钮，本质上是同一套逻辑，只是把命令换成了 hide-popover，用于关闭当前弹出层。

整个过程中，浏览器已经内建好了这些交互行为，我们只是把“我要做什么”写在了 HTML 上，而不是再写一层 JavaScript 去转发点击事件。

也正因为这样，这里没有事件监听，也不需要额外初始化代码。只要 DOM 构建完成，这套交互就已经可以直接工作。这件事带来的价值其实挺实际的：

• 一是首屏交互能力更容易提前生效

• 二是对可访问性和渐进增强更友好

• 三是很多项目里反复写的“胶水代码”可以直接省掉

除了 popover 之外，这套机制同样覆盖了 dialog 这种非常常见的交互场景，比如：

• 打开模态框

• 关闭对话框

比如一个最简单的 dialog 场景，可以直接这样写：

<button commandfor="mydialog" command="show-modal">  打开对话框</button>
<dialog id="mydialog">  <p>这是一个对话框内容</p>
  <button commandfor="mydialog" command="close">    关闭  </button></dialog>

这里的逻辑其实也非常直观：

• 外部按钮通过 show-modal 打开对话框

• 内部按钮通过 close 关闭当前 dialog

整个过程不需要额外写一层 JavaScript 去调用 dialog.showModal() 或 dialog.close()，浏览器已经帮我们把这套基础交互行为内建好了。

这些是在 Web 应用里几乎是“每天都在写”的功能。但从浏览器的角度看，它们其实都属于非常标准、非常稳定的交互模型。

Invoker Commands 释放出来的一个信号其实很明显：

有些能力，本来就应该是浏览器自带的，而不是每个团队、每个项目都从零再实现一遍。

这不是说过去的做法错了，而是 Web 平台本身在慢慢补齐这些基础能力。当这些能力进入浏览器内建层之后，开发者就可以把精力更多放在业务和复杂逻辑上，而不是重复写基础交互框架。

看到这里，很多同学可能会自然想到一个问题：除了 popover 和 dialog，还有没有其他的 command ？

答案是：有，而且不止这些。

下面是目前比较常见、也是最容易在实际项目里用到的一些内建 command：

当然，规范本身是持续演进的，未来浏览器内建的 command 只会越来越多。如果你想查看最新、最完整的 command 能力列表，建议直接看官方文档：MDN：Invoker Commands API

官方文档里会持续更新支持的命令类型，以及浏览器支持情况，这一类信息以官方为准是最稳的。

自定义命令

当然，这套能力并不只是给浏览器内置组件用的。规范里还允许开发者定义自定义命令（通常以 -- 开头），然后在 JavaScript 里监听对应的 command 事件来处理。

这一点其实很关键，因为它意味着：这不只是一个“少写 JS”的特性，而是一套可以扩展到组件层的交互协议。

比如，假设你自己封装了一个自定义组件，希望支持一种声明式的“切换状态”能力，就可以这样写：

<button commandfor="my-panel" command="--toggle-panel">  切换面板</button>
<div id="my-panel">  自定义面板内容</div>

#my-panel {  display: none;}
#my-panel.is-open {  display: block;}

const panel = document.getElementById("my-panel");
panel.addEventListener("command", (event) => {  if (event.command === "--toggle-panel") {    panel.classList.toggle("is-open");  }});

这里需要注意一点：command 事件是发在 commandfor 指向的目标元素上的，而不是发在按钮本身上，所以这里我们直接监听面板元素。

按钮点击时，会触发一个自定义的 --toggle-panel 命令，JavaScript 只需要监听 command 事件，然后根据命令类型执行对应逻辑即可。

换句话说，HTML 负责表达“我要触发什么行为”，而 JavaScript 负责真正执行复杂逻辑。

对于做组件库或者 Web Components 的同学来说，这个变化会非常有价值：

• 组件作者可以提供一套声明式的 HTML 使用方式

• 组件使用者不需要关心内部事件逻辑

• 很多交互细节可以被封装在组件内部

从长期来看，这其实是在降低组件的使用门槛，让组件更接近“拿来就能用”的体验。

写在最后

有开发者形容过一个很形象的变化：

• 过去，很多按钮的点击行为，本质上都是在调用一段 JavaScript

• 而现在，一部分标准化的交互，正在慢慢回到 HTML 这一层

但这并不是在削弱 JavaScript，而是在重新划分职责边界。可以简单理解为：

• HTML 负责表达结构和行为意图

• JavaScript 继续解决复杂逻辑、状态管理和业务计算这些真正有技术含量的问题

当基础交互逐渐成为浏览器内建能力之后，代码结构反而会更清晰：

通用能力交给平台，复杂问题交给开发者自己控制。

如果你接触过 HTMX 这类通过 HTML 属性驱动交互的方案，可能会有一点熟悉的感觉。很多曾经依赖库或框架实现的能力，正在一点点进入浏览器本身。从更长的时间线来看，其实方向已经很明确了：

Web 正在慢慢回到一种更“声明优先”的设计方式。先表达意图，再处理复杂逻辑。

这种变化不会一夜之间改变开发模式，但会一点点影响我们写代码的方式。

技术的发展，其实很少是推翻重来，更多时候是边走边补。

很多我们今天习以为常的能力，最早都只是框架里的封装、库里的工具，最后才慢慢沉淀成平台本身的一部分。

从这个角度看，像 Invoker Commands 这样的能力，可能不是最“炫”的新特性，但很可能是未来十年里，会一直默默存在的那一类基础能力。

好啦，今天的文章就分享到这里了。

​

阅读原文：https://mp.weixin.qq.com/s/fAUjUIz82_dcbnsI74BAtw