向HTML元素添加元数据的最佳方法

Question

我正在尝试整合一种在HTML中标记各种组件的方法,这些组件由jQuery脚本解析并在页面加载时创建.

例如,目前我可以将以下内容放入我的页面..

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

当jQuery脚本找到它时,它会注入创建一个带有图标的按钮所需的html以及所有必要的事件等.

但是,这很麻烦,需要很多长类名.我宁愿做这样的事......

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

它不是那么短,但在我看来更整洁,需要更少的解析.麻烦的是,我已经对"expandos"进行了一些研究,我相当肯定有些浏览器会不喜欢它并且它不会验证.

有人有更好的建议吗？

Answer 1

继续使用属性,但data-在其上使用前缀.从HTML5开始,所有元素data-都明确允许带有前缀的属性.例:

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

它现在适用于所有浏览器(虽然W3验证器可能会抱怨它的HTML5支持还没有为黄金时段做好准备),并且因为它现在已经指定了行为,所以它具有前瞻性.