大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
按钮对于开发动态 Web 应用程序至关重要，其一般用于打开菜单、切换操作和提交表单，为 Web 上的交互性提供了基础。
Chrome 135 引入了新的功能，开发者可使用新的 command 和 commandfor 属性提供声明性行为，增强和替换原有的 popovertargetaction 和 popovertarget 属性。
1. 传统模式：使用 JavaScript 控制按钮行为
在没有借助前端框架的情况下构建按钮行为会稍显复杂。虽然 HTML 为按钮提供了 onclick 事件处理程序，但由于内容安全策略 (CSP)，处理程序可能被禁止。
同时，虽然事件是在按钮元素上分派的，但按钮通常放在页面上以同时控制其他元素（例如：显示隐藏），开发者还需要使用辅助技术 (Assistive Technology) 协助用户访问此交互。
例如下面的代码表示传统按钮的处理逻辑：
<script type="module">
document.addEventListener('click', e => {
const button = e.target;
if (button.matches('.menu-opener')) {
const menu = button
.closest('.menu-wrapper')
.querySelector('.menu-content');
if (menu) {
button.setAttribute('aria-expanded', 'true');
menu.showPopover();
menu.addEventListener('toggle', e => {
// 关闭后重置 aria-expanded=false
if (e.newState == 'closed') {
button.setAttribute('aria-expanded', 'false');
}
}, {once: true})
}
}
});
</script>示例代码通过在按钮元素上设置 aria-expanded 属性来表示弹窗是否展开或折叠，以及受控元素是否显示或隐藏。这种方法可能有点麻烦，而借助于成熟的前端框架能在一定程度上改善开发体验，例如： React 框架会将点击事件映射到组件内部状态的更改：
function MyMenu({ children }) {
const [isOpen, setIsOpen] = useState(false);
// 设置组件内部状态
const open = useCallback(() => setIsOpen(true), []);
const handleToggle = useCallback((e) => {
// 弹窗影响状态
setIsOpen(e.newState === "open");
}, []);
const popoverRef = useRef(null);
useEffect(() => {
if (popoverRef.current) {
if (isOpen) {
popoverRef.current.showPopover();
} else {
popoverRef.current.hidePopover();
}
}
}, [popoverRef, isOpen]);
return (
<>
{children}
);
}一些设计系统或前端库可能会更进一步，提供封装状态变化的按钮元素的包装器，从而将状态变化抽象到触发组件后面，以牺牲灵活性来换取更好的开发体验：
import {MenuTrigger, MenuContent} from 'my-design-system';
// 从设计系统导入
function MyMenu({children}) {
return (
{children}
);
}2. 使用 command 和 commandfor 模式控制按钮行为
Invoker Commands API 提供了一种以声明方式为按钮分配行为的方法，允许在按钮被激活（单击或通过按键调用，例如：空格键或回车键）时控制交互元素。借助于 command 和 commandfor 属性，可以为按钮操作带来框架的人体工程学且不牺牲灵活性。
- commandfor：将
- command：指定对由控件
2.1 command 和 commandfor 最大化减少 JavaScript 代码
以下 HTML 在按钮和菜单之间设置声明关系，让浏览器自动处理逻辑和可访问性。无需关注 aria-expanded 或添加任何其他 JavaScript。
command 支持一系列内置行为，可映射到各种交互元素的 API：
- show-popover：映射到 el.showPopover()
- hide-popover：映射到 el.hidePopover()
- toggle-popover：映射到 el.togglePopover()
- show-modal：映射到 dialogEl.showModal()
- close：映射到 dialogEl.close()
通过以上命令映射方式，简化了可访问性（例如：提供 aria-details 和 aria-expanded 等效关系）、焦点管理等复杂而繁琐的工作。
例如下面的示例，还可以使用 command 和 commandfor 控制确认弹窗：
单击 “删除” 按钮将以模态方式打开对话框，而单击 “关闭”、“取消” 或 “删除” 按钮将关闭对话框，同时还会在对话框上触发 “close” 事件，该事件具有与按钮值匹配的 returnValue 属性。该方式最大化减少了 JavaScript 代码，只需在对话框上监听一个事件来确定下一步要做什么：
dialog.addEventListener("close", (event) => {
if (event.target.returnValue == "cancel") {
console.log("cancel was clicked");
} else if (event.target.returnValue == "close") {
console.log("close was clicked");
} else if (event.target.returnValue == "delete") {
console.log("delete was clicked");
}
});2.2 使用 --command 自定义命令
除了内置命令之外，开发者还可以使用 --self-command 前缀自定义命令。
自定义命令会在目标元素上分派 “command” 事件，且与内置命令一样不会执行任何额外逻辑。其为构建以各种方式对按钮做出反应的组件提供了灵活性，而无需任何包装器组件、遍历目标元素的 DOM 或将按钮点击映射到状态更改。
<script type="module">
const image = document.getElementById("the-image");
// 添加自定义命令的事件监听函数
image.addEventListener("command", (event) => {
if (event.command == "--rotate-landscape") {
image.style.rotate = "-90deg"
} else if (event.command == "--rotate-portrait") {
image.style.rotate = "0deg"
}
});
</script>3. 与 popovertargetaction 和 popovertarget 的不同
如果以前使用过 popover，可能熟悉 popovertarget 和 popovertargetaction 属性，其工作原理分别与 commandfor 和 command 类似 ，但特定于 popover。
Greetings, one and all!command 和 commandfor 属性完全取代了旧属性，例如：新属性支持旧属性所做的一切，并添加了新功能。
参考资料
https://developer.chrome.com/blog/command-and-commandfor
https://open-ui.org/components/future-invokers.explainer/
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API