大家好，很高兴又见面了，我是"前端技术进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
按钮对于开发动态 Web 应用程序至关重要，其一般用于打开菜单、切换操作和提交表单，为 Web 上的交互性提供了基础。
Chrome 135 引入了新的功能，开发者可使用新的 command 和 commandfor 属性提供声明性行为，增强和替换原有的 popovertargetaction 和 popovertarget 属性。
1. 传统模式：使用 JavaScript 控制按钮行为
在没有借助前端框架的情况下构建按钮行为会稍显复杂。虽然 HTML 为按钮提供了 onclick 事件处理程序，但由于内容安全策略 (CSP)，处理程序可能被禁止。
同时，虽然事件是在按钮元素上分派的，但按钮通常放在页面上以同时控制其他元素（例如：显示隐藏），开发者还需要使用辅助技术 (Assistive Technology) 协助用户访问此交互。
例如下面的代码表示传统按钮的处理逻辑：
<div class="menu-wrapper"><button class="menu-opener" aria-expanded="false">打开菜单</button><div popover class="menu-content"><!-- 复杂的弹窗内容 --></div></div>
<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=falseif (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 (<><button onClick={open} aria-expanded={isOpen}>打开弹窗</button><div popover onToggle={handleToggle} ref={popoverRef}>{children}</div></>);}
一些设计系统或前端库可能会更进一步，提供封装状态变化的按钮元素的包装器，从而将状态变化抽象到触发组件后面，以牺牲灵活性来换取更好的开发体验：
import {MenuTrigger, MenuContent} from 'my-design-system';// 从设计系统导入function MyMenu({children}) {return (<MenuTrigger><button>Open Menu</button></MenuTrigger><MenuContent>{children}</MenuContent>);}
2. 使用 command 和 commandfor 模式控制按钮行为
Invoker Commands API 提供了一种以声明方式为按钮分配行为的方法，允许在按钮被激活（单击或通过按键调用，例如：空格键或回车键）时控制交互元素。借助于 command 和 commandfor 属性，可以为按钮操作带来框架的人体工程学且不牺牲灵活性。
commandfor：将元素转换为按钮，控制给定的交互元素，将要控制的元素的 ID 作为其值
command：指定对由控件控制的元素执行的操作，通过 commandfor 属性指定
2.1 command 和 commandfor 最大化减少 JavaScript 代码
以下 HTML 在按钮和菜单之间设置声明关系，让浏览器自动处理逻辑和可访问性。无需关注 aria-expanded 或添加任何其他 JavaScript。
<button commandfor="my-menu" command="show-popover">Open Menu</button><div popover id="my-menu"><!-- 复杂的弹窗内容 --></div>
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 控制确认弹窗：
<button commandfor="confirm-dialog" command="show-modal">删除记录</button><dialog id="confirm-dialog"><header><h1> 确认删除记录 </h1><button commandfor="confirm-dialog" command="close" aria-label="Close" value="close"><img role="none" src="/close-icon.svg"></button></header><p> 确定该操作？其无法取消 </p><footer><button commandfor="confirm-dialog" command="close" value="cancel">取消</button><button commandfor="confirm-dialog" command="close" value="delete">删除</button></footer></dialog>
单击 “删除” 按钮将以模态方式打开对话框，而单击 “关闭”、“取消” 或 “删除” 按钮将关闭对话框，同时还会在对话框上触发 “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 或将按钮点击映射到状态更改。
<button commandfor="the-image" command="--rotate-landscape">横屏</button><button commandfor="the-image" command="--rotate-portrait">纵向</button><img id="the-image" src="photo.jpg"><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。
<button popovertarget="my-popover">Open Popover</button><div popover id="my-popover">Greetings, one and all!</div>
command 和 commandfor 属性完全取代了旧属性，例如：新属性支持旧属性所做的一切，并添加了新功能。
参考资料
https://developer.chrome.com/blog/command-and-commandfor
https://open-ui.org/components/future-invokers.explainer/
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
