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

Question

我正在使用 javascript 将事物绑定(bind)到 HTML 对象，并且需要一种比类名稍微复杂的机制。

我的第一个方法是使用像结构声明这样的类名，其中绑定(bind)位于名称位置:

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}

请注意，绑定(bind)具有不同数量的参数。

这是非常脆弱的。我不能用额外的名称装饰任何 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 是一个 GUID(但我可以很容易地手动“做到这一点……”)

现在，in theory , classnames 是 CDATA，所以一切都应该是 tickety-boo，但是我 hae ma doots! 特别是在旧的跨浏览器方面......

关于类名中 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>