javascript - 我应该如何将服务器端数据与 HTML 中的客户端 UI 元素相关联？

Question

我在开发 AJAX 应用程序时经常遇到这个问题。假设我希望用户能够单击与我站点上的每个评论关联的“标记”图标，这会导致向服务器发送 AJAX 请求，请求标记评论。我需要将评论 ID 与客户端的评论相关联，以便 AJAX 请求可以与要标记的评论的服务器通信。

This page解释了多种以这种方式注释 HTML 的方法，但没有一种是非常令人满意的。虽然我可以只使用 id 或 class 属性将评论 id 与标志按钮相关联(例如 id="comment_1998221")，但是对于不适合这些属性的更复杂的数据(例如任意字符串)，这会失败。这种事情有最佳实践吗？每次我需要这样做时，我都会遇到一些麻烦，比如使用 id 属性、隐藏的表单字段，或者更糟糕的是将 span 设置为 display:none。

HTML5 data-* 属性似乎是一个完美的解决方案，但我看到了很多对它们的敌意，这让我认为人们一定已经有了他们满意的解决方案。我很想知道它是什么。

Answer 1

This page explains a number of ways to annotate HTML in this manner, but none of them are very satisfactory.

不过，它们几乎就是您所拥有的全部。虽然该页面不是一个非常好的摘要，但存在错误并且它误解了“不引人注目的”JavaScript 的含义。

例如，将 script 元素放在 body⟩ 中实际上是完全有效的——只是不要直接放在 table 元素中。您可以将所有脚本片段放在表格的底部，或者将每一行放在它自己的表格中，或者如果您打算在相关行内改变 DOM，甚至有一些限制。

设置“id="comment-123"”然后扫描所有 id 以“comment-”开头的行确实适合您的特定情况。要设置非识别性额外信息属性，您可以使用 HTML5 数据属性或使用例如将其破解到类名中。 “class="评论类型-foo 数据栏""。当然，ID 和类名都对您可以使用的字符有限制，但是可以将任何字符串编码为有效字符串。例如，您可以使用自定义 URL 样式编码来隐藏非字母数字字符:

<tr class="greeting-Hello_21_20_E2_98_BA">
    ...
</tr>

function getClassAttr(el, name) {
    var prefix= name+'-';
    var classes= el.className.split(' ');
    for (var i= classes.length; i-->0;) {
        if (classes[i].substring(0, prefix.length)==prefix) {
            var value= classes[i].substring(prefix.length);
            return decodeURIComponent(value.split('_').join('%'));
        }
    }
    return null;
}

var greeting= getClassAttr(tr, 'greeting'); // "Hello! ☺"

您甚至可以用这种方式存储复杂的非字符串值，方法是将它们编码为 JavaScript 或 JSON 字符串，然后使用 exec(或可用的 JSON.parse)检索它们。

但是，如果您将任何重要的东西放在那里，它很快就会变得困惑。那是您可能更喜欢评论的地方。您可以在此处放置任何内容，但序列 '--' 除外，如果它恰好出现在字符串中，则很容易转义。

<table>
    <tr class="comment">
        <td>...</td>
        <!-- {"id": 123, "user": 456} -->
    </tr>
</table>

function getLastComment(node) {
    var results= [];
    for (var i= node.childNodes.length; i-->0;)
        if (node.childNodes[i]==8)
            return node.childNodes[i];
    return null;
}

var user= getLastComment(tr).user;

摘要警告说，这可能无法保证有效，因为 XML 解析器可能会丢弃注释，但 DOM Level 3 LS 解析器必须默认保留它们，到目前为止，每个浏览器和主要 XML 库都这样做。