HTML标记上的非标准属性。好事？坏事？你的意见？

Question

HTML标记上的非标准属性。好事？坏事？你的意见？HTML（或者只是XHTML？）在标签上的非标准属性方面相对严格。如果它们不是规范的一部分，那么您的代码将被视为不符合规范。然而，非标准属性对于将元数据传递给Javascript非常有用。例如，如果假设链接显示弹出窗口，则可以在属性中设置弹出窗口的名称：<a href="#null" class="popup" title="See the Popup!"     popup_title="Title for My Popup">click me</a>或者，您可以将弹出窗口的标题存储在隐藏元素中，例如span：<style>     .popup .title { display: none; }</style><a href="#null" title="See the Popup!" class="popup">     click me    <span class="title">Title for My Popup</span></a>然而，我被撕裂了哪个应该是优选的方法。第一种方法更简洁，我猜测，并没有像搜索引擎和屏幕阅读器一样多。相反，第二种选择使得存储大量数据更容易，因此更加通用。它也符合标准。我很好奇这个社区的想法是什么。你怎么处理这样的情况？第一种方法的简单性是否超过潜在的缺点（如果有的话）？

Answer 1

自定义属性提供了将额外数据传输到客户端的便捷方式。Dojo Toolkit定期执行此操作，并指出（Debunking Dojo Toolkit Myths）：

自定义属性始终是有效的HTML，它们只是在针对DTD进行测试时不进行验证。[...] HTML规范规定，用户代理中的HTML呈现引擎会忽略任何未识别的属性，Dojo可以选择利用此功能来提高开发的便利性。

Answer 2

另一个选择是在Javascript中定义这样的东西：

<script type="text/javascript">var link_titles = {link1: "Title 1", link2: "Title 2"};</script>

然后，您可以稍后在Javascript代码中使用它，假设您的链接具有与此哈希表中的ID对应的ID。

它没有其他两种方法的缺点：没有非标准属性，也没有丑陋的隐藏跨度。

缺点是对于像你的例子那样简单的事情可能有点过分。但对于更复杂的场景，您需要传递更多数据，这是一个不错的选择。特别是考虑到数据是作为JSON传递的，因此您可以轻松地传递复杂对象。

此外，您将数据与格式分开，这对可维护性是一件好事。

你甚至可以拥有这样的东西（你不能用其他方法真正做到）：

var poi_types = {1: "City", 2: "Restaurant"};var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

而且由于您最有可能使用某种服务器端编程语言，因此该哈希表应该是动态生成的（只需将其序列化为JSON并将其吐入页面的标题部分）。