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

我使用javascript将东西绑定到HTML对象，需要一种比类名稍微复杂的机制

我的第一种方法是使用类名，如结构声明，其中绑定位于名称位置，因此：

Definition = identifier: foo bar baz

使用此定义对某些类名进行编码

<p   id="someid"    class="identifier bish bash bosh">
<div id="anotherid" class="identifier heebie 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对的最佳语法的建议、建议、现有技术和最佳实践都受到了热烈欢迎。

将帮助您确定使用什么

对我来说，我倾向于这样的东西：

keys: soft, hard, wet, hot
values: foo, bar, baz, fuzz

class="soft_bar wet_foo hot_fuzz"

---

特别是，大括号{，}不起作用，因为它们在CSS样式表中用于标记样式属性块。

在这个类中，有必要为新属性中的键/值创建数据

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}");

---

如果您不关心有效的HTML，您可以使用任意属性名，而不是试图劫持“class”属性

<p id="someid" foo="bish" bar="bash" baz="bosh">

---

你能用一个div或span围绕这个物体吗？然后使用id和/或class属性存储名称-值对，并使用parent属性访问它们

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span>

---

这使您可以对原始对象执行任何操作。

HTML5将为此目的添加data-*属性，这些属性现在已经在每个浏览器中运行（但可能会发送一些用于循环的验证程序）

约翰说：你好，你好吗？

如果这是有效的方法，我只需使用$（“#someid”.attr（key，val））；但你能做到吗？当你说“每个浏览器”时，你到底是什么意思？肯定有一些浏览器不支持它？IE6？这方面的支持限制是什么…我不知道，因为我没有使用过它。但据我所知，这是一个一直行之有效的怪癖，因为浏览器是标记汤解析器（只是现在他们才将其标准化）。当然，它不是有效的html（除非你使用的是html5 doctype，它在IE6上确实有效），但是在页面加载后，有一些方法可以添加这些属性，所以验证器不会抱怨。我用这些KV服务器页面，然后使用库后加载来实现所有的魔法…与部队交谈，我们将使用这个，ta对所有参与进来的人说……KV对类名用于javascript绑定，其他类名用于CSS样式——因此，如果它们不能被CSS规则绑定，我一点也不担心。我的理解是，它们仍然可以工作（需要尝试一下，看看……）我不关心有效的HTML:），但我怀疑其他人可能会希望使用与此库绑定的页面……页面上使用的所有其他库（JQuery等）将绑定到一个对象-绑定到一个对象的父对象将有点违反“最小惊讶原则”（我认为…）

$("#someid").attr("foo"); // "bish"

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span>

<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>