HTML Invoker Commands API已在所有主流浏览器中获得了基础支持。Safari 26.2在Chrome 135和Firefox 144之后也完成了对该API的适配。这一功能引入了声明式按钮控件,使得在处理弹出窗口、对话框等交互元素时不再需要使用JavaScript。

Invoker Commands API为按钮元素添加了两个新属性:commandforcommandcommandfor属性用于指定要控制的元素的ID,而command属性则指定了要执行的操作。这种声明式设计方式使开发者能够在不编写事件监听器或等待JavaScript加载执行的情况下创建交互组件,从而显著提升页面的初始交互性。

内置的命令支持对弹出窗口和对话框进行常见的操作。对于弹出窗口,开发者可以使用toggle-popovershow-popoverhide-popover这些命令;而对于对话框,则支持show-modalclose命令。下面是一个使用声明式方式实现弹出窗口的示例:

<button commandfor="mypopover" command="toggle-popover">
    切换弹出窗口的状态
</button>
<div id="mypopover" popover>
     <button commandfor="mypopover" command="hide-popover">>关闭/div>

该API还支持自定义命令,这些自定义命令的前缀必须包含两个连字符,这与CSS中的自定义属性类似。开发者可以通过command事件来监听这些自定义命令,并通过事件对象中的命令名称来识别它们。这样一来,组件开发者就可以为他们的Web组件创建声明式的API,而无需用户编写JavaScript代码。

一篇发表在Medium上的文章将这一API称为“你还没有使用的最酷的API”,并表达了这样的观点:通过使用这些API,你的按钮可以在不依赖JavaScript的情况下执行各种操作。

开发者Pawel Grzybek也指出每当Web技术出现新的功能,使我们能够将代码实现的层次向上移动时,我都会感到非常兴奋,他将这一API描述为“将按钮点击处理函数的实现部分直接集成到HTML中”。

CSS-Tricks也指出,自定义命令实际上依赖于HTML中的事件处理属性,但他们认为这种做法可能存在争议

对于目前还在使用popovertargetpopovertargetaction属性的开发者来说,Invoker Commands API提供了一种更加统一的使用方式。现在,弹出窗口既可以继续使用原有的专用属性,也可以使用新的commandcommandfor属性,从而实现逐步过渡。

HTMX这类通过自定义属性提供声明式控制功能的库相比,Invoker Commands所提供的功能其实与原生平台特性类似。Open UI的解释文档指出,虽然该技术的初始版本主要针对弹出窗口和对话框进行了设计,但对

等其他元素的支持被推迟了,但可能会在未来的版本中加入。

Invoker Commands API是在WHATWG的HTML规范中定义的,这一机制体现了人们为减少常见交互功能对JavaScript的依赖而做出的持续努力。通过让开发者能够以声明式的方式创建交互组件,该API不仅提升了开发者的开发体验,也改善了用户的用户体验——因为页面加载速度更快,标记语言的使用也更加便捷。

Comments are closed.