将模块的状态存储为类或数据属性会更好吗？

考虑一个简单的手风琴模块，可以通过用户输入进行扩展或折叠。将模块的状态存储为类或数据属性会更好吗？

如果模块的状态要存储在DOM上，应该采用哪种方式实现？

作为一类：

<article class="accordion-item expanded">...</article>

或作为自定义数据属性：

<article class="accordion-item" data-state="expanded">...</article> 
alternatively... 
<article class="accordion-item" data-expanded="true">...</article>

对于语义，可访问性和性能，应该使用和为什么该方法？

来源

2014-03-03 Bryce

所有这三种方法在语义上是毫无意义的，也就是说，在类名或用户没有内在的语义价值 - 定义的自定义数据属性，这两者都不会影响标记的含义或结构。性能是你必须测量自己的东西。 – BoltClock

@BoltClock，一个参数可以被做出来，在DOM元素的类中存储状态可能不会在语义上代表类属性的点。另外，即使不是严格意义上的“语义”，标记对于开发人员来说可以是语义的。 – Bryce

可访问性，你需要做两件事情之一：

使用WAI-ARIA创作准则手风琴http://www.w3.org/TR/wai-aria-practices/#accordion以必要的唱段的属性和JavaScript事件处理程序键盘导航实现手风琴
将手风琴的状态置于屏幕外的文字中，并在其发生变化时进行维护。您可以通过添加一个<span>到每篇文章的上方，并使用像这里所描述的技术做到这一点：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

来源

2014-03-03 22:26:03 unobfuscator

将模块的状态存储为类或数据属性会更好吗？

回答

相关问题