在HTML类名中表示键/值对的最佳方式

Question

我使用javascript将事物绑定到HTML对象,并且需要比类名更复杂的机制.

我的第一种方法是使用类名称,如结构声明,其中绑定位于名称位置,如下所示:

Definition = identifier: foo bar baz

用这个定义编码一些类名给出

<p   id="someid"    class="identifier bish bash bosh">
<div id="anotherid" class="identifier heebie jeebie">

这可以理解为:

{foo: bish,   bar: bash,   baz: bosh};
{foo: heebie, bar: jeebie}

请注意,绑定具有不同数量的参数.

这非常脆弱.我无法使用其他名称来装饰任何html元素(例如添加拖放等jquery行为等)并且通常有点粗制滥造......

我想做的是将它们表示为键值对,如下所示:

<p   id="someid"    class="id{foo:bish} id{bar:bash} id{baz:bosh} random class">
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}">

这允许我在元素上有随机定位和随机长度的类名,只要我的id是一个sorta GUID(但我可以'手动轻松地做到这一点'......)

现在,从理论上讲,类名是CDATA,所以一切都应该是嘀嗒声,但我喜欢麻烦!特别是在旧的跨浏览器方面......

所有关于KV对的最佳语法的建议,建议,现有技术,最佳实践都感激不尽.

Answer 1

HTML5 将为此目的添加 data-* 属性，并且这些属性已经在当今的每个浏览器中运行（但可能会发送一些验证器进行循环）。

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>